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<CustomFormInstance>(null); //第三步表单的dom
  return (
    <>
      <Children ref={childrenRef} />
      <Button
        onClick={() => {
          childrenRef?.current?.reLoadPage();
        }}
      >
        点击获取子组件方法
      </Button>
    </>
  );
};
export default Father;

 子组件:Children.tsx

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

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

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