將數據從子組件傳遞到父組件

Question

我正在閱讀有關Medium的教程，該教程解釋了如何將數據從子組件傳遞到父組件（ https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17 ）。 該教程獲得了5.5k點贊，這意味着很多人必須在自己的工作中使用它作為參考。 但是，在復制代碼1：1時，我完全無法獲得相同的結果。 實際上，數據根本沒有從孩子傳遞給父母。 另外，當我強制數據通過時，我遇到了無限循環。 如果有人指出我錯了，或者實際上畢竟是本教程，我將不勝感激。

JS撥弄我的代碼： https : //jsfiddle.net/lightspeed12/69z2wepo/216279/

 class ToDoItem extends React.Component { someFn = () => { let listInfo = 'Hi mom' this.props.callBackFromParent(listInfo); } render(){return <h3>Hello World</h3>} }; class ToDoList extends React.Component { constructor(props){ super(props) this.state = { listDataFromChild: null } } myCallback = (dataFromChild) => { this.setState({ listDataFromChild : dataFromChild }) } otherFn = () => { console.log(this.state.listDataFromChild, 'from state') } render(){ this.otherFn(); //calling otherFn to determine value of this.state.listDataFromChild return ( <div> <h2>Message from Child is:</h2> <ToDoItem callBackFromParent={this.myCallback} /> </div> ) } } ReactDOM.render( <ToDoList />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Answer 1

this.someFn()的ToDoItem從不執行。

嘗試：

// To-do Item.
class ToDoItem extends React.Component {

  // Render.
  render = () => <h3>Hello World</h3>

  // Did Mount.
  componentDidMount() {
    this.props.callBackFromParent('Callback Received.')
  }

}

有關passed和executed functional prop的實際示例，請參見下文。

 // Parent. class Parent extends React.Component { // State. state = {data: null} // Callback. callback = data => this.setState({data}) // Render. render(){ const {data} = this.state console.log('Data:', data) return ( <React.Fragment> <h2>Parent</h2> <Child callback={this.callback}/> Data: {data || 'null'} </React.Fragment> ) } } // Child. const Child = props => <button onClick={() => props.callback('Callback Received.')}>Child.</button> // Mount. ReactDOM.render(<Parent/>,document.querySelector('#root')) 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div> 

Answer 2

永遠不會調用this.someFn() ，它會調用ToDoList組件的回調方法。 在此單擊按鈕時將調用this.someFn() 。

    class ToDoItem extends React.Component {
      someFn = () => {
        let listInfo = 'Hi mom'
        this.props.callBackFromParent(listInfo);
      }
       componentDidMount() {
          this.someFn()
  }
  render(){return <h3>Hello World</h3>}
};

來自兒童的數據可以視為

  render(){
        return (
          <div>
            <h2>Message from Child is:{this.state.listDataFromChild}</h2>

            <ToDoItem 
              callBackFromParent={this.myCallback}
            />  
          </div>
        )
      }