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

Posted 2023-02-22

【中文标题】React - 更新每个子组件的状态

【英文标题】：React - Updating state for each child component

【发布时间】：2015-04-07 18:14:23

【问题描述】：

不确定我是否理解正确。如果我正在制作一个子组件，键入按钮，它会增加自己的计数器，是否可以在没有 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);

【问题讨论】：

对不起，我不清楚这个问题。你说的 2 个单独的函数叫什么名字？

如果每个孩子都有一个增量函数，即增量 1 和增量 2，我想我以错误的方式解决了这个问题。我认为每个 ChildComponent 都应该有自己的增量功能。解决方案 = gist.github.com/antigirl/90f46aa7f51ba05f676a ?

【参考方案1】：

我在您的评论中看到您已决定将状态放入子组件中。虽然这很好用，但 React 的强大之处在于您可以在对应用程序中的所有交互都有意义的级别上对状态进行推理。将两个计数器的状态都保存在父级中是完全合理的。我认为典型的实现将在父级中具有单个更新函数，将其传递，当前计数器值和计数器 ID 作为道具向下传递，并在子级中有一个更新函数，旨在使用相关计数器 ID 调用父级的更新函数.

更新：您实现此模式的要点与我所说的很接近，在父级中保持状态并在子级中创建一个 onClick 处理程序，该处理程序依次调用其父级的更新函数，传入让父级知道要更新哪个计数器的参数。你可能会发现只传递“refz”prop 作为参数而不是传递整个子 React 组件更有用，但作为概念证明，你有这个想法。

【讨论】：

我不明白子组件中更新功能的原因？你能做一些伪代码吗？

这似乎有效，我已经清理了 HTML 位 gist.github.com/antigirl/a44c12f6a0084db7819a