應該只有一個組件擁有狀態嗎？

我有三個組件（當前全部擁有state，因爲它們各自處理其輸入字段的state）。我正在閱讀一個共同的組成部分應該擁有這個國家。應該只有一個組件擁有狀態嗎？

所以我有這個共同的組件：

var UnitConverter= React.createClass({ 

    render: function(){ 
    return(
     <div> 
      <Temperature/> 
      <Length/> 
      <Mass/> 
     </div> 
    ) 
    } 
});

然後是Temperature，Length，並Mass組件：https://jsfiddle.net/Amidi/fvgv5rb2/1/，我不知道這是很好的做法，有這麼多的部件都擁有state。我將如何集中精確的state？

來源

2016-06-07 Mahmud Adam

您可以使用包像終極版，這是集中的狀態出於這個確切的目Redux的創建者現在直接在Facebook上與React一起工作，他在egghead上有一組優秀的教程：https://egghead.io/courses/getting-started-with-redux – Jorden

我認爲這是一個矯枉過正的介紹回到這樣一個小問題 – methyl

如果是這樣，如果你想進入實際的React開發中，你將需要比'this.setState（{}）'更多的東西？爲什麼不在小規模項目中學習呢？ – Jorden

要集中的狀態下，可以傳遞一個回調到組件，然後將向下傳遞價值，您UnitConverter，如下：

var UnitConverter= React.createClass({ 
    getInitialState: function() { 
    return { temperature: 0, length: 0, mass: 0 } 
    } 

    render: function(){ 
    return(
     <div> 
      <Temperature value={this.state.temperature} onChange={this.handleTemperatureChange} /> 
      <Length value={this.state.length} onChange={this.handleLengthChange} /> 
      <Mass value={this.state.mass} onChange={this.handleMassChange} /> 
     </div> 
    ) 
    } 

    handleTemperatureChange: function(temperature) { 
    this.setState({ temperature: temperature }) 
    } 

    handleLengthChange: function(length) { 
    this.setState({ length: length }) 
    } 

    handleMassChange: function(mass) { 
    this.setState({ mass: mass }) 
    } 
});

來源

2016-06-07 22:22:55 methyl

應該只有一個組件擁有狀態嗎？

回答

相關問題