无效的挂钩调用.钩子只能在函数组件的主体内部调用.在react原生签名画布中

Question

我是一个反应原生的新手。我在函数组件中有react原生签名画布代码，但现在我在类组件代码中编写该代码。那么我会得到这样的错误=无效的钩子调用。钩子只能在函数组件的主体内部调用。那么有什么问题请帮忙。

这是代码

export default class Kyc extends Component {
constructor(props) {
super(props);
this.state = {
singleFileSIGN:''
};
}
ref = useRef();

handleSignature = (signature) => {
const path = FileSystem.cacheDirectory + 'sign.png';
FileSystem.writeAsStringAsync(path, signature.replace('data:image/png;base64,', ''), {encoding: FileSystem.EncodingType.Base64}).then(res => {

// console.log(res);
// FileSystem.getInfoAsync(path, {size: true, md5: true}).then(file => {
FileSystem.getInfoAsync(path).then(file => {
console.log(file);
this.setState({ singleFileSIGN: file.uri});
console.log(singleFileSIGN)
})
}).catch(err => {
console.log("err", err);
})
};
handleEmpty ()  {
console.log('Empty');
};
handleClear ()  {
console.log('clear success!');
};
handleEnd () {
ref.current.readSignature();
};

render () {
return  (
<View style={styles.container}>

<View style={{flex: 1, width:355, 
...Platform.select({
android: {
marginBottom:-80,
borderColor: '#FF8C00',
borderWidth:1
//  marginBottom:-150
},
}),
}}>
<SignatureScreen style={{height: '400%'}}
ref={this.ref}
onEnd={this.handleEnd}
onOK={this.handleSignature}
onEmpty={this.handleEmpty}
onClear={this.handleClear}
descriptionText={'Sign here!'}
/>
</View>
</View>
);
}
}

Answer 1

钩子仅用于函数组件。课堂上使用如下：

constructor(props) {
super(props);
this.ref = React.createRef();
}