react subcomponent passes value to parent component

// Parent component
    class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            test: '123'
        };
    }

    parentClick(arg) {
        this.setState({
            test: arg
        })
    }

    render() {
        return (
            <div>
                <div>I am the parent component</div>
                {this.state.test}
                <Child parentClick={this.parentClick.bind(this)}/>
            </div>
        );
    }

}

//Sub components
class Child extends Component {
    handClick() {
        this.props.parentClick('345')
    }

    render() {
        return (
            <div>
                <button onClick={this.handClick.bind(this)}>Sub components</button>
            </div>
        );
    }
}

1. If the child wants to change the value of the parent, define an event in the parent and pass it to the child.
2. The child component calls the event defined by the parent component by clicking the button, and takes the value to be passed as the parameter.
3. Process data in the parent component event.

Transfer data between cross level components

• Use context (based on producer consumer model)

     //App
     import React, {Component} from 'react'
     import Child from './child'
     import PropTypes from 'prop-types'
     
     import './index.css';
     
     class App extends Component {
         constructor(props) {
             super(props)
     
             this.state = {
                 test: '123'
             };
         }
         //Parent component declares its supported context
         static childContextTypes = {
             foo: PropTypes.string,
             test: PropTypes.string,
             parentClick: PropTypes.func
         };
         //The parent component provides a function to return the corresponding context object
         getChildContext() {
             return {
                 foo: 'bar',
                 test: this.state.test,
                 parentClick: this.parentClick.bind(this)
             }
     
         }
     
         parentClick(arg) {
             this.setState({
                 test: arg
             })
         }
     
         render() {
             return (
                 <div>
                 <div>I am the parent component</div>
                     {this.state.test}
                     <Child parentClick = {this.parentClick.bind(this)}/>
                 </div>
             );
         }
     }
    export default App

   // Child
   import React, {Component} from 'react'
   import Grandson from './grandson'
   
   class Child extends Component {
       handClick() {
           this.props.parentClick('345')
       }
       render() {
           return (
               <div>
                   <button onClick={this.handClick.bind(this)}>Sub components</button>
                   <Grandson/>
               </div>
           );
       }
   }
   export default Child

  // Grandson
  import React, {Component} from 'react'
  import PropTypes from 'prop-types'
  
  class Grandson extends Component {
      // Grandson component declares that it needs to use context
      static contextTypes = {
          test: PropTypes.string,
          parentClick: PropTypes.func
      }
      handleClick(){
          console.log(this.context);
          this.context.parentClick('789');
      }
      render() {
          return (
              <button onClick={this.handleClick.bind(this)}>Grandson component{this.context.test}</button>
          );
      }
  }
  export default Grandson

Use context for cross level value transfer:

1. Setting context: getChildContext is the process of setting context. The object it returns is context (that is, the box in the middle in the figure above). All sub components can access this object.
2. Set childContextTypes: its function is actually similar to that of props parameter of proptype validation component, which must be set.
3. Subcomponent getting context: contextTypes are also required to be written to declare and verify the type of state you need to get
4. After declaration, you can obtain the properties of the context object defined in the App component through this.context.XXX.