正常在jsx中写法如下:
class Header extends Component<any>{
myInputRef = React.createRef();
render(){
return(
<div>
<input type="text" ref={this.myInputRef}/>
</div>
)
}
}
但是在tsx中由于类型检查,会编译报错:
Type 'RefObject<unknown>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
Type 'RefObject<unknown>' is not assignable to type 'RefObject<HTMLInputElement>'.
Type 'unknown' is not assignable to type 'HTMLInputElement'.ts(2322)
看错误信息,需要添加类型,改为:
myInputRef = React.createRef<HTMLInputElement>();
参考:
https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315