National Day charging feature:

Traffic jams, no more nonsense and serve directly.

1. Pass values from parent component to child component by using props attribute

class Component extends React.Component {
    constructor (props) {
      super(props);
    }
    render() {
      return (
        <div>
            <h1>I am  {this.props.name}</h1>
        </div>
      );
    }
}

ReactDOM.render(
  <div>
    <Component name='YUSIRXIAER'></Component>
    <h1>hello world!!!</h1>
  </div>,
  document.getElementById('app')
);

The effect is as shown in the picture of dad's gaze. Is it OK

2. To transfer values from a child component to a parent component, simply use callbacks. For example, in the following example, the child component changes the color of the parent component

// Process values passed between parent and child components
class Child extends React.Component {
    constructor (props) {
      super(props);

    }
    handleClick() {
      this.props.colorChange('yellow')
    }

    render() {
      return (
        <div>
            <h1>Value of parent component  {this.props.bgColor}</h1>
            <button onClick={(e) => this.handleClick(e)}>Change parent color</button>
        </div>
      );
    }
}

class Father extends React.Component {
    constructor (props) {
      super(props);
      this.state={
        bgColor: '#999'
      };
    }
    onBgColorChange(color) {
      this.setState({
        bgColor: color
      })
    }
    render() {
      return (
        <div style={{background:this.state.bgColor}}>
          <Child bgColor={this.state.bgColor} colorChange={(color)=>{this.onBgColorChange(color)}}></Child>
          {/* The child component transmits values like the parent component, and sets the callback */}
        </div>
      );
    }
}
ReactDOM.render(
  <div>
    <Father></Father>
  </div>,
  document.getElementById('app')
);

Look at the effect

3. Transfer values between level components under the same parent component. In a simple sentence, the child component is first transferred to the parent component, and then the parent component is transferred to that child component

// To process the value transfer between horizontal components, first transfer to the parent component, and then transfer the parent component to another component
class Child1 extends React.Component {
    constructor (props) {
      super(props);

    }
    handleClick() {
      this.props.changeChild2Color('yellow')
    }

    render() {
      return (
        <div>
            <h1>Child1:   {this.props.bgColor}</h1>
            <button onClick={(e) => this.handleClick(e)}>towards Child2 Pass value, change its color</button>
        </div>
      );
    }
}
class Child2 extends React.Component {
    constructor (props) {
      super(props);
    }

    render() {
      return (
        <div style={{background:this.props.bgColor}}>
            <h1>Child2:   {this.props.bgColor}</h1>
        </div>
      );
    }
}
class Father extends React.Component {
    constructor (props) {
      super(props);
      this.state={
        child2BgColor: '#999'
      };
    }
    onChild2BgColorChange(color) {
      this.setState({
        child2BgColor: color
      })
    }
    render() {
      return (
        <div>
          {/* Value transfer between horizontal components*/}
          <Child1 changeChild2Color={(color)=>{this.onChild2BgColorChange(color)}}></Child1>
          <Child2 bgColor={this.state.child2BgColor}></Child2>
        </div>
      );
    }
}
ReactDOM.render(
  <div>
    <Father></Father>
  </div>,
  document.getElementById('app')
);

Look at the effect

Learn it, see you later, continue to traffic!!!