React新手求教：子组件向祖父组件传数据的实现方法

嘿，我看你卡在子组件向祖父组件传数据这儿了，别着急，咱们一步步来捋清楚~

首先先指出你当前代码里的一个小问题：你的子组件按钮的onClick写法有问题，现在的写法会在组件渲染的时候就直接执行this.props.data()，而不是点击按钮时才触发。得改成箭头函数包裹的形式，这样只有点击时才会调用：

// 修正后的子组件按钮部分
<button onClick={() => this.props.data(this.state.counterChild)}>Click me</button>

接下来，咱们来说怎么实现子→父→祖父的数据传递，核心思路就是层层传递回调函数：祖父组件把一个回调函数传给父组件，父组件再把自己的回调（或者直接把祖父的回调）传给子组件，子组件触发时调用这个回调，数据就一路传到祖父组件啦。

下面是完整的示例代码，你可以参考：

1. 子组件（Child） #

export class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counterChild: 5
    }
  }

  render() {
    return (
      <div>
        <span>Child: {this.state.counterChild}</span><br />
        {/* 点击时调用父组件传过来的回调，把当前counterChild传出去 */}
        <button onClick={() => this.props.onChildDataChange(this.state.counterChild)}>Click me</button>
      </div>
    );
  }
}

2. 父组件（Parent） #

父组件需要接收祖父组件的回调，然后把它（或者封装一下）传给子组件：

export default class Parent extends React.Component {
  handleChildData = (childData) => {
    // 收到子组件的数据后，调用祖父组件传过来的回调，把数据继续传递
    this.props.onGrandchildDataChange(childData);
  }

  render() {
    return (
      <div>
        <span>Parent Component</span><br />
        {/* 把父组件的回调传给子组件 */}
        <Child onChildDataChange={this.handleChildData} />
      </div>
    );
  }
}

3. 祖父组件（Grandparent） #

祖父组件定义处理数据的方法，然后把这个方法传给父组件：

class Grandparent extends React.Component {
  handleGrandchildData = (grandchildData) => {
    console.log("从子组件传过来的数据：", grandchildData);
    // 这里可以做你想要的处理，比如更新祖父组件的state
    // this.setState({ counter: grandchildData });
  }

  render() {
    return (
      <div>
        <span>Grandparent Component</span><br />
        {/* 把祖父的回调传给父组件 */}
        <Parent onGrandchildDataChange={this.handleGrandchildData} />
      </div>
    );
  }
}

如果你的组件层级更深，这种层层传递的方式会有点繁琐，等你对React更熟悉之后，可以学习使用React Context或者状态管理工具（比如Redux、Zustand）来简化跨层级的数据传递，但对于新手来说，先掌握这种回调传递的方式是基础哦~

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