如何将callback函数从子组件传递至父组件再到祖父组件？

当然可行啦！完全不用觉得自己的问题“稚嫩”，组件间跨层级传递回调是前端开发里非常常见的需求，很多初学者都会遇到类似的困惑，这是很正常的～

其实逻辑和子组件向父组件传递回调是一致的，就是逐层传递回调函数：先把祖父组件定义好的回调传给父组件，父组件再将这个回调继续传递给子组件，当子组件触发回调时，就能一路向上通知到祖父组件执行对应的逻辑。

我用React举个具体的例子（其他框架比如Vue的思路也是类似的，只是语法稍有不同）：

1. 祖父组件：定义回调并传给父组件 #

首先在祖父组件里写好需要执行的逻辑函数，然后把它作为props传递给父组件：

// Grandparent.js 祖父组件
import Parent from './Parent';

function Grandparent() {
  // 祖父组件的回调逻辑
  const handleGrandAction = (data) => {
    console.log('祖父组件收到子组件传来的数据：', data);
    // 这里可以添加祖父组件需要执行的业务逻辑，比如更新状态、发起请求等
  };

  return (
    <div>
      <h2>我是祖父组件</h2>
      {/* 将回调函数作为props传给父组件 */}
      <Parent passToGrandpa={handleGrandAction} />
    </div>
  );
}

export default Grandparent;

2. 父组件：接收回调并传递给子组件 #

父组件不需要额外处理这个回调，只需要把它继续向下传递给子组件即可：

// Parent.js 父组件
import Child from './Child';

function Parent({ passToGrandpa }) {
  return (
    <div>
      <h3>我是父组件</h3>
      {/* 把从祖父那拿到的回调继续传给子组件 */}
      <Child triggerGrandCallback={passToGrandpa} />
    </div>
  );
}

export default Parent;

3. 子组件：触发回调并传递数据 #

在子组件的交互时机（比如按钮点击、表单提交）触发这个回调，同时可以传递需要的数据：

// Child.js 子组件
function Child({ triggerGrandCallback }) {
  const sendDataToGrandpa = () => {
    // 触发回调，把数据传给祖父组件
    triggerGrandCallback('这是子组件的消息！');
  };

  return (
    <div>
      <h4>我是子组件</h4>
      <button onClick={sendDataToGrandpa}>点击给祖父发消息</button>
    </div>
  );
}

export default Child;

小补充：层级很深时的简化方案 #

如果你的组件层级特别多（比如曾祖父→祖父→父→子→孙），逐层传递回调会显得有点繁琐，这时候可以考虑用状态管理工具（比如Redux、Zustand）或者框架自带的跨层级传值方案（比如React的Context API、Vue的Provide/Inject）来简化流程。不过对于初学者来说，先掌握逐层传递的基础方法，能帮你更好理解组件间通信的本质哦～

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