如何將值從父組件傳遞到子組件（反應）

我是新來學習React，並試圖將我從我的ParentComponent（通過輸入框）中的用戶輸入獲得的值傳遞給其ChildComponent - 我將使用用戶輸入值運行AJAX調用。如何將值從父組件傳遞到子組件（反應）

我認爲通過替換ParentComponent中的狀態可行 - 但我仍然無法在ChildComponent中抓住它。

我也只想要ChildComponent運行/渲染只有在收到來自ParentComponent的輸入值（以便我可以運行AJAX調用，然後渲染...）。

任何提示？

var ParentComponent = React.createClass({ 
    getInitialState: function() { 
     return {data: []}; 
    }, 

    handleSearch: function(event) { 
     event.preventDefault(); 
     var userInput = $('#userInput').val(); 
     this.replaceState({data: userInput}); 
    }, 

    render: function() { 
     return (
      <div> 
       <form> 
        <input type="text" id="userInput"></input> 
        <button onClick={this.handleSearch}>Search</button> 
       </form> 
       <ChildComponent /> 
       {this.props.children} 
      </div> 
     ); 
     } 
    }); 

var ChildComponent = React.createClass({ 
    render: function() { 
     return <div> User's Input: {this.state.data} </div> 
     } 
    });

來源

2015-10-31 codinginnewyork

您應該傳遞父狀態爲道具，以你的孩子：更改父裏面你childcomponent渲染：

<ChildComponent foo={this.state.data} />

然後你就可以通過this.props.foo訪問它裏面ChildComponent。

說明：內部ChildComponent，this.state.someData引用ChildComponent狀態。而你的孩子沒有狀態。（順便問一句）

另外：this.setState()可能好於this.replaceState()。

，更好地初始化父狀態

return { data : null };

來源

2015-10-31 23:57:42 wintvelt

如何將值從父組件傳遞到子組件（反應）

回答

相關問題