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

不知道我是否正确理解这一点。如果我正在创建一个子组件，请键入button，这会增加它自己的计数器，是否可以在没有2个独立函数的情况下执行此操作？以下我做的似乎是一个黑客？如果theres X按钮数量，我将如何重构此代码更加动态？ REF的工作方式似乎可以引用孩子中的html，但其他方式呢？我是否甚至想过这是正确的方式，因为组件有它自己的状态，它是否应该有自己的更新方法？React - 更新每个子组件的状态

/*** @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);

来源

2015-02-07 John O' Donnell

对不起，这个问题我不清楚。你正在谈论的2个独立功能的名称是什么？ – nilgun 2015-02-07 18:08:47

如果每个孩子都有增量功能，即增量1和增量2，我想我已经解决了这个错误的方式。我认为每个ChildComponent应该有它自己的增量函数。解决方案= https://gist.github.com/antigirl/90f46aa7f51ba05f676a ？ – 2015-02-07 18:13:23

我看到你的评论，你已经上把状态的子组件解决。虽然这很好，但React的强大之处在于，您可以在适用于应用程序中所有交互的层次上对状态进行推理。将两个柜台的状态保持在父母身上是完全合理的。我认为典型的实现将在父项中有一个更新函数，将它传递给当前计数器值，并将计数器ID作为道具向下，并且在子项中具有更新函数，用于调用具有相关计数器ID的父项更新函数。

更新：你要点实施这种模式是接近我说的是，保持状态，家长和创造，反过来调用其父更新功能的孩子一个onClick处理程序，传递参数让父母知道要更新哪个计数器。你可能会发现仅仅传递“refz”道具作为参数比传递整个子React组件更有用，但作为概念证明，你有想法。

来源

2015-02-07 19:08:56 ottonomy

我不明白推理子组件中的更新功能？你可以请一些伪代码吗？ – 2015-02-07 19:33:46

这似乎工作，我已经清理了HTML位 https://gist.github.com/antigirl/a44c12f6a0084db7819a – 2015-02-07 21:16:13

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

回答

相关问题