Normally written in jsx as follows:
class Header extends Component<any>{
myInputRef = React.createRef();
render(){
return(
<div>
<input type="text" ref={this.myInputRef}/>
</div>
)
}
}
However, due to type checking in tsx, an error will be compiled:
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)
Look at the error message, you need to add the type, change it to:
myInputRef = React.createRef<HTMLInputElement>();
reference:
https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315