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

Question

Not sure if i'm understanding this correctly. If i'm making a child component, type button, that increments its own counter, is it possible to do so without having 2 separate functions? the following i've done seems like a hack? what if theres X amount of buttons, how would i refactor this code to be more dynamic? REF's seem to work in the way i can reference the html in the child, but what about the other way? Am i even thinking about this the right way, because component has its own state, should it have its own update method?

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

I see in your comment that you've settled on putting state in the child component. While that works fine, the power of React is that you reason about state at a level that makes sense for all the interactions in the application. It is perfectly reasonable to hold both counters' state in the parent. I think the typical implementation would have a single update function in the parent, pass it, current counter value, and the counter IDs down as props, and have an update function in the child designed to invoke the parent's update function with the relevant counter ID.

Update: Your gist implementing this pattern is close to what I was talking about, keeping state in the parent and creating an onClick handler in the child that in turn calls its parent's update function, passing in parameters that let the parent know which counter to update. You may find it more useful to just pass the "refz" prop as that parameter rather than passing in the entire child React component, but as a proof of concept, you have the idea.