Please be lenient, because I am an amateur. Situation: When rendering a component1, component2 is used in which the property is transferred. The state of component2 changes in its processor. It is necessary to fix the change in state of component 2 and take this into account in component 1.

var Component1 = React.createClass({ getInitialState(){ return{ total: 0 } }, render(){ const total = this.state.total; return <Component2 total={total} /> } }); var Component2 = React.createClass({ getInitialState(){ return{ total: this.props.total } }, handleClick(){ var total = this.state.total + 1; this.setState({total: total}); }, render(){ const total = this.state.total; return <div onClick={this.handleClick}>{total}</div> } });
  • Question1: How do I change the total state in Component1 from Component2?
  • Question2: (in case the first option is completely absurd): which option would you suggest to take into account changes in the state of another component (do you need to transfer the property to the component chain by order - if yes, how to get feedback)?
  • To paraphrase: I need to pass a property to component2, duplicate the global variable from component2, and initialize the changed value in component1. Am I on the right track? - pravosleva

1 answer 1

The second component should not have a state . One option is to pass the handler.

 var Component1 = React.createClass({ getInitialState() { return { total: 0 } }, render(){ var total = this.state.total; return React.createElement(Component2, { total: this.state.total, updateTotal: this.updateTotal }); }, updateTotal(total) { this.setState({total: total}); } }); var Component2 = React.createClass({ handleClick() { this.props.updateTotal(this.props.total + 1); }, render() { return React.DOM.div({onClick: this.handleClick}, this.props.total); } }); ReactDOM.render( React.createElement(Component1, null), document.querySelector('main') ); 
 div { display: inline-block; padding: .5em 1em; border: 1px solid; cursor: pointer; min-width: 7em; text-align: center; } div:hover { background: silver; } 
 <script src="https://fb.me/react-0.14.2.min.js"></script> <script src="https://fb.me/react-dom-0.14.2.min.js"></script> <main></main>

  • Please complete the 3-component scheme with a change in total. If it is easy. - pravosleva
  • @pravosleva There are no three components to the question. I did not understand what was required. - Qwertiy ♦
  • @ Qwertiy I wanted to look at the implementation of passing such a handler to the third element (Comp3) through an intermediary (Comp2). Reason: Comp2 is too complicated - I want to break it again. I summarize: You declared the handler in Comp1, transferred it to Comp2, then the project becomes more complicated: Comp3 appeared in Comp2 >> the handler must be transferred to Comp3. What will the intermediary (Comp2) look like? - pravosleva
  • @ Qwertiy The question with two components you answered exhaustively (by the way, thanks!). As for the third, this is already a complicated version of the problem. - pravosleva
  • The question is removed, thanks! I decided to stick with two components ... In my opinion, this has a better effect on the readability of the code. - pravosleva