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

Question

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

问题：类型错误：无法读取未定义的属性'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 函数未定义。我什至尝试将 props 从 SubMain2 直接传递到 Main 组件，但是没有成功。

Answer 1

你不应该使用 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
  }
}

Answer 2

道具只被down传递给children。每个 child 组件都需要调用传递给它的回调。

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

这是我制作的沙盒，您可以看到控制台日志：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>
     )
 }
}

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

How to pass props from child component to its parent of parent?

reactjs

react-props

react-component