React hook中父组件调用子组件的方法

一、父组件的操作： 利用useRef创建一个ref实例，并将其赋值给shareRef变量。通过指定ref为JSX属性，将其向下传递给 

父组件的主要代码：
import React, {useRef} from 'react';

const parent = (props) = {
    const shareRef = useRef();
    return (
        

            //子组件
            
        
    )
}

export default Parent;

  二、子组件的操作：

1.react传递ref给forwardRef内函数（props, ref） => ....,作为其第二个参数
2.使用useImperativeHandle把父组件需要调用的方法暴露出来

子组件的主要代码：
import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    handleShareSubmit,
    resetSharePopup,// 这里运用了es6的简写，（实际等于： resetSharePopup：resetSharePopup）
  }));
const handleShareSubmit = () => {.....}
const  resetSharePopup = () => {.....}
}

export defalut Child;

 项目应用场景描述： 一个弹窗作为父组件，而内部的表单独立为一个子组件，当点击父组件的确定按钮时，需要调用子组件的表单提交函数。实现的思路则如上所述。

但是需要注意的是，当组件中运用了antd中的Form的表单检验，也就是运用了getFieldDecorator时，需要运用Form.create()包裹，即，

 export default Form.create()(Child);

此时父组件运用以上的方法调用子组件的方法会出现无法获取到的情况。

解决的方法： 

需要在

 wrappedComponentRef={shareRef}  />

三、向下转发ref参数到子组件对应的Dom节点。当ref挂载完成之后，ref.current将指向子组件中的对应Dom节点。此时父组件就可以通过ref.current.methods()调用子组件的对应方法。

 const onSubmitShare = () => {
    shareRef.current.handleShareSubmit();
    // console.log(shareRef);
  };

如果是类组件，则，