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

我有三个组件（当前都拥有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集中？

最佳答案

要集中状态，您可以将回调传递给组件，该组件随后将值传递给您的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 })
   }
});

关于javascript - 应该只有一个组件拥有状态吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37689958/