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

Question

不确定我是否理解正确。如果我正在制作一个子组件，键入按钮，它会增加自己的计数器，是否可以在没有 2 个单独功能的情况下这样做？以下我所做的似乎是一个黑客？如果有 X 数量的按钮，我将如何重构此代码以使其更具动态性？ 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 处理程序，该处理程序依次调用其父级的更新函数，传入让父级知道要更新哪个计数器的参数。你可能会发现只传递“refz”prop 作为参数而不是传递整个子 React 组件更有用，但作为概念证明，你有这个想法。