如何将道具从子组件传递到其父组件的父组件？

Question

假设我有三个组件，其中 SubMain2 在 SubMain1 内，而 SubMain1 在 Main 内。如何将道具从 SubMain2 传递到 Main 组件？

问题：TypeError：无法读取未定义的属性“handleSubMain1”

主要

class Main extends Component {
  constructor(props) {
  super(props);
  this.handleSubMain1 = this.handleSubMain1.bind(this);
  }

 handleSubMain1() {
  console.log('received props from SubMain1 which is from SubMain2!');
 }

  render() {
     <SubMain1 handleSubMain1={this.handleSubMain1}/>
  }
}

SubMain1

class SubMain1 extends Component {

 constructor(props) {
 super(props);
 this.handleSubMain2 = this.handleSubMain2.bind(this);
 }

 handleSubMain2() {
  console.log('received props from SubMain2!');
 }

  render() {
     <SubMain2 handleSubMain2={this.handleSubMain2}/>
  }
}

SubMain2

Component SubMain2 extends Component {
   constructor(props) {
   super(props);
   }

   render() {
     this.props.handleSubMain2();
  }
}

我尝试了这种方法，但是我发现 handleSubMain1 函数未定义。我什至尝试将道具从 SubMain2 直接传递给 Main 组件，但是没有运气。

Answer 1

这是我制作的沙盒，您可以查看控制台日志：https://codesandbox.io/s/funny-chebyshev-n5srl?file=/src/App.js:63-717

这里是你需要的代码：

class Main extends Component {
  handleSubMain1(arg) {
    console.log('received props from SubMain1 which is from SubMain2!');
    console.log(arg);
 }

  render() {
     return <SubMain1 handleSubMain1={this.handleSubMain1}/> 
  }
}

class SubMain1 extends Component {
  render() {
     return <SubMain2 handleSubMain2={this.props.handleSubMain1}/>
  }
}

class SubMain2 extends Component {
  handleClick(){
    this.props.handleSubMain2('any thing I pass as an argument I can access it in main');
  }

  render() {
     return (
       <button onClick={this.handleClick.bind(this)}>
         Click me to send data to Main
       </button>
     )
 }
}

Answer 2

道具只会向下传递给孩子。下一行的每个子组件都需要调用传递给它的回调。

class Main extends Component {
  mainCallback = val => console.log("mainCallback", val);

  render() {
    return <SubMain1 handleSubMain1={this.mainCallback} />;
  }
}

class SubMain1 extends Component {
  subMain1Callback = val => {
    console.log("subMain1Callback");
    this.props.handleSubMain1(val);
  };

  render() {
    return <SubMain2 handleSubMain2={this.subMain1Callback} />;
  }
}

class SubMain2 extends Component {
  subMain2Callback = val => {
    console.log("subMain2Callback");
    this.props.handleSubMain2(val);
  };

  render() {
    return (
      <button onClick={() => this.subMain2Callback(42)}>
        SubMain2 - click me?
      </button>
    );
  }
}

Answer 3

您不应该使用this.handSubMainX，只需使用handleSumbmainX={this.handleSubmainX} 并将其绑定到您的构造函数中 结果如下：

主要：

class Main extends Component {
  constructor(props) {
  super(props);
  this.handleSubMain1 = this.handleSubMain1.bind(this);
  }

 handleSubMain1() {
  console.log('received props from SubMain1 which is from SubMain2!');
 }

  render() {
     return <SubMain1 handleSubMain1={this.handleSubMain1}/> <-- 2 Change here
  }
}

SubMain1：

class SubMain1 extends Component {

 constructor(props) {
 super(props);
 this.handleSubMain2 = this.handleSubMain2.bind(this);
 }

 handleSubMain2() {
  console.log('received props from SubMain2!');
 }

  render() {
     return <SubMain2 handleSubMain2={this.handleSubMain2}/> <-- 2 Change here
  }
}

SubMain2：

Component SubMain2 extends Component {
   constructor(props) {
   super(props);
   }

   render() {
     return this.props.handleSubMain2(); // this function should return jsx
  }
}