React-hooks 父组件通过ref获取子组件数据和方法

一、类方法获取子组件节点

如果是class类，存在实例，可以通过 React.createRef() 挂载到节点或者组件上，然后通过 this 获取到该节点或组件。

class RefTest extends React.Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    componentDidMount(){
        console.log(this.myRef.current);
    }
    render(){
        return <input ref={this.myRef}/>
    }
}

二、React-hooks获取子组件节点和方法

在子组件是函数组件的时候，因为函数组件没有实例，所以在正常情况下， ref 是不能挂载函数组件上的。那么此时，我们通过 useImperativeHandle 和 forwardRef 配合就能达到效果。

useImperativeHandle

useImperativeHandle：可以配合 forwardRef 自定义暴露给父组件的实例值。

useImperativeHandle为我们提供了一个类似实例的东西，它帮助我们通过useImperativeHandle 的第二个参数，将所返回的对象的内容挂载到父组件的 ref.current 上.

useImperativeHandle 接收三个参数：

① 第一个参数 ref：接收 forWardRef 传递过来的 ref。 ② 第二个参数 createHandle：处理函数，返回值作为暴