React中如何通过父组件按钮点击调用子组件函数并传递数据

React本身是单向数据流设计，父组件默认无法直接访问子组件内部作用域的函数，官方推荐函数组件场景下使用forwardRef配合useImperativeHandle实现子组件方法对外暴露，具体代码实现如下：

子组件改造 #

首先引入相关API，用forwardRef包裹子组件，再通过useImperativeHandle将内部需要被父组件调用的方法绑定到传入的ref上：

import { forwardRef, useImperativeHandle } from 'react';

// forwardRef包裹后，子组件可以接收第二个ref参数
const Child = forwardRef((props, ref) => {
  // 原有的子组件内部方法，修正了你代码里参数名的拼写错误（原代码多写了一个F）
  const addNewData = (dataFromParent) => {
    append(dataFromParent) // 保留你原有的内部逻辑，比如子组件内部列表追加、状态更新等
  };

  // 把需要父组件调用的方法挂载到ref上
  useImperativeHandle(ref, () => ({
    addNewData
  }), []); // 第三个参数是依赖数组，和useEffect规则一致，依赖变化时会重新更新暴露的方法

  return <div>子组件业务内容</div>
})

export default Child;

父组件改造 #

父组件通过useRef创建ref实例，绑定到引入的子组件标签上，按钮点击时通过ref实例调用子组件暴露的方法，传入父组件数据即可：

import { useRef } from 'react';
import Child from './Child';

const Parent = () => {
  // 创建ref存储子组件暴露的方法集合
  const childRef = useRef(null);

  const onButtonClick = () => {
    // 加可选链避免子组件未挂载时调用报错
    childRef.current?.addNewData({id:1, name:'sam'})
  }

  return (
    <div>
      <button onClick={onButtonClick}>点击触发子组件方法</button>
      {/* 把ref传递给子组件 */}
      <Child ref={childRef} />
    </div>
  )
}

export default Parent;

注意：ref暴露方法属于React提供的跨层级作用域访问的应急方案，不要滥用。如果业务逻辑可以通过状态提升、父组件传回调给子组件触发的常规单向数据流方式实现，优先选择常规方案；只有子组件逻辑完全内聚（比如封装的通用表单组件触发校验、通用列表组件触发新增行、组件内部动画触发等场景），才适合用这种方式实现。

内容的提问来源于stack exchange，提问作者Asif Kaif