应该只有一个组件拥有状态吗？

我有三个组件（当前全部拥有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

应该只有一个组件拥有状态吗？

回答

相关问题