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

Question

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

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

React - Updating state for each child component

javascript

events

components

state

reactjs