rect用forwardRef和useImperativeHandle实现父调用子组件方法

//父组件
const parent:Rect.FC = (props)=>{
 const childRef = useRef(null);
 const callFn = () => {
    childRef.current.fn()
 }
 return (
   <div>
        <child ref={childRef}/ >
        <button onClick=(() => callFn())>调用子组件方法</button>
   </div>
  )

}


//子组件
const child:Rect.FC = Rect.forwardRef((props,ref) => {
  const fn = () => {
     console.log('我是方法')
  }
  // 将子组件中需要调用的方法绑定到 ref
  useImperativeHandle(ref, () => ({
   fn:fn,
  }));
})

当子组件是HOC 高阶组件，例如子组件带有Form.create() ，真正作为表单处理的又是在子组件的子组件内部。导致子组件内部的表单数据无法更改

解决方法：

将ref改为wrappedComponentRef