React hook父调用子组件方法

注意几个关键字useRef，useImperativeHandle，.current，forwardRef

父组件

 const dataobj = {
     pdata1: 1,
     pdate2:2
}
 const [dataobj ,setDataobj ] = useState({});
 const pchildref = useRef();
 function parantHandler() {
    // 子组件调用的父组件方法
}
 function parentDivClick() {
    // 父组件调用子组件方法
    pchildref .current._childFn();
}
 return (
    <div>
        <Child 
             ref={pchildref}
             params1={dataobj.pdata1}
             params2={dataobj.pdata2}
             handlerClick={parantHandler}>
        </Child>
        <div onClick={parentDivClick}></div>
    </div>
)

子组件

 const Child = (props,ref) => {   
    // 接收父组件的传值
     const { params1,params2,handlerClick} = props;
     const childRef = useRef();
    // 暴露的子组件方法，给父组件调用
    useImperativeHandle(ref,() => {
         return {
            _childFn() {
                // something….
            }
        }
    })
    // handlerClick子组件调用父组件方法
     return <div 
        ref={childRef} onClick={handlerClick}>
        </div>
}

//很重要
// forwardRef 配合useRef 父组件调用子组件方法使用
export default forwardRef(Child);

原文