Question

不确定我是否正确理解这一点。如果我正在创建一个子组件，键入按钮，增加自己的计数器，是否可以这样做而没有2个单独的功能？以下我做的似乎是一个黑客？如果有多少按钮，我将如何重构此代码以获得更多动态？ REF似乎以我可以在孩子中引用html的方式工作，但另一种方式呢？我是否以正确的方式思考这个问题，因为组件有自己的状态，是否应该有自己的更新方法？

/*** @jsx React.DOM */
var MyComponent = React.createClass({
  getInitialState: function() {
    return {
      counter1: 1,
      counter2: 1
    };
  },
  increment: function(i) {
    if (i === 1) {
      this.setState({
        counter1: this.state.counter1 + 1
      });
    } else {
      this.setState({
        counter2: this.state.counter2 + 1
      });
    }
  },
  render: function() {
    return ( < div >
      <ChildComponent item = {this.state.counter1} click={this.increment.bind(this, 1)}/>
      <ChildComponent item={this.state.counter2} click={this.increment.bind(this, 2)}/ >
      < /div>
        );
    }
  });


  var ChildComponent = React.createClass({
    render: function() {
        return (
          <div>
            <h1> Counter {this.props.item} </h1 >
            <button onClick = {this.props.click} > ++ < /button>
          </div >
    );
  }
});


React.render( < MyComponent / > , document.body);

Answer 1

我在你的评论中看到你已经决定将状态置于子组件中。虽然这样可以正常工作，但React的强大功能在于您可以将状态推理到对应用程序中的所有交互都有意义的级别。保持两个柜台是完全合理的。父母的州。我认为典型的实现将在父级中具有单个更新函数，将其传递，当前计数器值和计数器ID作为道具，并且在子级中具有旨在调用父级的更新函数的更新函数。相关的柜台ID。

更新：实现此模式的要点接近于我所说的内容，将状态保留在父级中并在子级中创建onClick处理程序，该处理程序又调用其父级的更新函数，传入参数，让父母知道要更新的计数器。您可能会发现通过＆＃34; refz＆＃34;更有用。 prop作为该参数而不是传递整个子React组件，但作为概念证明，你有这个想法。

React - 更新每个子组件的状态

1 个答案: