Как передать реквизит от дочернего компонента к его родительскому компоненту?

Question

Предположим, у меня есть три компонента, где SubMain2 находится внутри SubMain1, а SubMain1 находится внутри Main. Как передать реквизиты из SubMain2 в основной компонент?

ПРОБЛЕМА: TypeError: Невозможно прочитать свойство 'handleSubMain1' из неопределенного

Main

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

Реквизиты передаются только вниз детям. Каждому дочернему компоненту, находящемуся на линии, необходимо вызвать обратный вызов, который был ему передан.

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 2

вот песочница, которую я сделал, чтобы вы могли видеть журнал консоли: 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 3

Вы не должны использовать this.handSubMainX, просто используйте handleSumbmainX={this.handleSubmainX} и привяжите это в свой конструктор, вот результат будет выглядеть так:

Main:

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
  }
}