react hook:useRef,forwardRef, useImperativeHandle父子通信

使用场景:父组件调用子组件里的方法

 父组件：Father.tsx

import React, { useRef } from 'react';
import Children from './children';
import { Button, FormInstance } from 'antd';
interface CustomFormInstance extends FormInstance {
  reLoadPage: () => void;
}
const Father = () => {
  const childrenRef = useRef(null); //第三步表单的dom
  return (
    <>
      
       {
          childrenRef?.current?.reLoadPage();
        }}
      >
        点击获取子组件方法
      
    
  );
};
export default Father;

 子组件:Children.tsx

import React, { forwardRef, useImperativeHandle } from 'react';

const Children = forwardRef((_props, ref) => {
  useImperativeHandle(ref, () => ({
    reLoadPage: () => {
      console.log('子组件里的方法');
    },
  }));
  return 
test
;
});
export default Children;

点击Father.tsx里的按钮就可以调用子组件里的方法了