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

Javascript React-更新每个子组件的状态,javascript,events,components,state,reactjs,Javascript,Events,Components,State,Reactjs,不确定我是否理解正确。如果我正在制作一个子组件,类型按钮,它增加了自己的计数器,那么在没有两个单独的函数的情况下是否可以这样做?我做的以下事情看起来像是一个黑客?如果有X个按钮,我将如何重构此代码以使其更具动态性? REF的工作方式似乎与我可以在子对象中引用html的方式相同,但另一种方式呢?我是否有这样的想法,因为组件有自己的状态,是否应该有自己的更新方法 /***@jsx React.DOM*/ var MyComponent=React.createClass({ getInitialS

不确定我是否理解正确。如果我正在制作一个子组件,类型按钮,它增加了自己的计数器,那么在没有两个单独的函数的情况下是否可以这样做?我做的以下事情看起来像是一个黑客?如果有X个按钮,我将如何重构此代码以使其更具动态性? REF的工作方式似乎与我可以在子对象中引用html的方式相同,但另一种方式呢?我是否有这样的想法,因为组件有自己的状态,是否应该有自己的更新方法

/***@jsx React.DOM*/
var MyComponent=React.createClass({
getInitialState:函数(){
返回{
1:1,
比分2:1
};
},
增量:功能(i){
如果(i==1){
这是我的国家({
计数器1:this.state.counter1+1
});
}否则{
这是我的国家({
计数器2:this.state.counter2+1
});
}
},
render:function(){
返回(
); } }); var ChildComponent=React.createClass({ render:function(){ 返回( 计数器{this.props.item} ++ ); } });
React.render(,document.body)我在您的评论中看到,您已经决定将状态放在子组件中。虽然这很好,但React的威力在于,您可以在对应用程序中的所有交互都有意义的级别上对状态进行推理。将两个计数器的状态保留在父级中是完全合理的。我认为典型的实现在父级中有一个更新函数,将它、当前计数器值和计数器ID作为道具向下传递,在子级中有一个更新函数,用于调用具有相关计数器ID的父级更新函数


更新:实现此模式的要点与我所说的非常接近,在父级中保留状态,并在子级中创建onClick处理程序,该处理程序反过来调用其父级的Update函数,传入参数,让父级知道要更新哪个计数器。您可能会发现只传递“refz”属性作为该参数比传递整个child React组件更有用,但作为概念证明,您有这个想法。

对不起,我不清楚这个问题。你所说的两个独立函数的名称是什么?如果每个孩子都有一个递增函数,即递增1和递增2,我想我解决这个问题的方法是错误的。我认为每个子组件都应该有自己的增量函数。解决方案=?我不理解子组件中更新函数的推理?你能做一些伪代码吗?这看起来很有效,我已经清理了HTML代码