一：场景

在进行开发过程中，我们有时候需要进行子组件调用父组件的方法，或者说，父组件需要调用子组件的方法

那么，怎么实现呢

在react中，子组件可以通过对外暴露方法，让父组件进行调用，父组件可以把自己方法传递过来，供子组件进行调用

二：子组件调用父组件方法

主要通过传递方法过去，让子组件进行调用，主要通过props

export default forwardRef(function Search(props, ref) {})

  <Search ref={childRef} parentAddCount={getAdminUserList} />

    props?.parentAddCount?.();

   props?.parentAddCount?.(searchInfo);//传参给父组件

三：父组件调用子组件方法

主要通过子组件进行暴露方法，父组件调用,子组件通过useImperativeHandle像外暴露

    useImperativeHandle(ref, () => {
        return {
            getChildStr,
        };
    })

let childStr = childRef.current?.getChildStr();

四：完整代码

1：子组件

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

// 子组件使用forwardRef函数包裹
// forwardRef函数接收两个参数，第一个参数是props，第二个参数是ref
const Child = forwardRef((props, ref) => {
  // 定义方法，将来由父组件调用
  const getChildStr = () => {
    console.log('子组件的getChildStr方法被触发');
    return '来自子组件的返回值';
  };

  const getParentFn = () => {
    // 调用父组件的方法
    props?.parentAddCount?.();
  };

  // useImperativeHandle函数接收两个参数，第一个参数是ref，第二个参数是一个函数
  // 这个函数返回一个对象，这个对象中的属性和方法会被暴露给父组件
  useImperativeHandle(ref, () => {
    return {
      getChildStr,
    };
  });

  return (
    <div className={'p-3 bg-amber-500'}>
      <div>我是子组件</div>

      <Button onClick={getParentFn}>调用父组件方法</Button>
    </div>
  );
});

export default Child;

2：父组件

import React, { useRef } from 'react';
import Child from '@/pages/test/Child';
import { Button } from 'antd';

const Index = () => {
  let [count, setCount] = React.useState(0);
  let childRef = useRef();

  // 提供给子组件调用的方法，子组件使用 prop.parentAddCount() 实现调用父组件的方法
  const addCount = () => {
    setCount(count + 1);
  };

  // 调用子组件方法，使用 childRef.current 获取子组件暴露的属性和方法
  const getChildStr = () => {
    let childStr = childRef.current?.getChildStr();
    console.log(childStr);
  };

  return (
    <>
      <Child ref={childRef} parentAddCount={addCount} />

      <div style={{ marginTop: 20 }}>count:{count}</div>
      <Button onClick={getChildStr}>调用子组件的方法</Button>
    </>
  );
};

export default Index;