class组件内使用ref存在的问题

340 阅读1分钟

因为class组件没有hook 需要用React.createRef()来创建ref

 const formRef=Reat.createRef()
 

当用ref引用组件里面嵌套的函数组件实例时发现失败

export deault class Myform extends React.Component{
   const formRef=React.createRef()
   render(){
    return(
     <Form ref={this.formRef}>
     
     </Form>
    )
   }
}

会发现formRef为空的情况 这时候需要用到React.forwardRef()进行包装

const Form=React.forwardRef(Form)
export default Form

这样Form就能正常接收ref 不过这时formRef还为空 需要useImperativeHandle来暴露ref给父类实例

 function Form(props,ref){
    useImperactiveHandle(ref,()=>{})
 }
 Form=React.foewardRef(Form)
 export default Form

useImperactiveHandle和React.forwardRef一起配套使用