1. Parent child component communication

1) the parent component communicates with the child component, using Props
Parent passes name to child

 <GreateH name="kitty"/>

The child component receives the value of the parent component through props and displays

class GreateH extends React.Component{
    static defaultProps = {
        name:'CoCo'
    };
    constructor(props){
        super(props);
        this.state ={
            name:props.name
        }
    }
    render(){
        return <div>
            <h2>hello,{this.state.name}</h2>     
        </div>
    }
}

2) the child component communicates with the parent component and executes the callback function

As shown in the figure, click the sub component button to change the title color in the parent component

class GreateH extends React.Component{
    static defaultProps = {
        name:'CoCo'
    };
    constructor(props){
        super(props);
        this.state ={
            name:props.name
        }
    }
    changeBtn(){
        if(typeof this.props.click == 'function' ){
          //Trigger the event of the parent component, change the title color in the parent component
            this.props.click();
        }
    };
    render(){
        return <div>
            <h2>hello,{this.state.name}</h2>
            <button onClick={this.changeBtn.bind(this)}>Click to change the title color</button>
        </div>
    }
}

export default GreateH;

Change the color of the corresponding title through the changeColor event in the parent component

class App extends Component {
   changeColor(obj){
       var oDom = document.getElementsByClassName(obj.class)[0];
       oDom.style.color = obj.color;
   };
  render() {
    return (
      <div className="App">
          <h2 className="title1">Sub component 1</h2>
          <GreateH name="kitty" click={this.changeColor.bind(this,{color:'red',class:'title1'})}/>
          <hr/>
          <h2 className="title2">Sub module two</h2>
          <GreateH  name="lily" click={this.changeColor.bind(this,{color:'blue',class:'title2'})}/>
      </div>
    );
  }
}

export default App;

2. Brother component communication

As shown in the figure, to change the name of A by clicking the button of B component, click the button of A component to change the name of B component

Parent component:

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            nameA:'kitty',
            nameB:'Lily'
        }
    }
    changeBName(params){
        this.setState({
            nameB:params
        })

    }
    changeAName(params){
        this.setState({
            nameA:params
        })
    }
  render() {
    return (
      <div className="App">
          <h2 className="title1">assembly A</h2>
          <GreateA name={this.state.nameA} click={this.changeBName.bind(this)}/>
          <hr/>
          <h2 className="title2">assembly B</h2>
          <GreateB  name={this.state.nameB} click={this.changeAName.bind(this)}/>
      </div>
    );
  }
}

A components:

class GreateH extends React.Component{
    static defaultProps = {
        name:''
    };

    changeBtn(){
        if(typeof this.props.click == 'function' ){
            this.props.click('kristy');
        }
    };
    render(){
        return <div>
            <h2>hello,{this.props.name}</h2>
            <button onClick={this.changeBtn.bind(this)}>Click Change B Name of component</button>
        </div>
    }
}

B component

class GreateH extends React.Component{
    static defaultProps = {
        name:''
    };
    changeBtn(){
        if(typeof this.props.click == 'function' ){
            this.props.click('CoCo');
        }
    };
    render(){
        return <div>
            <h2>hello,{this.props.name}</h2>
            <button onClick={this.changeBtn.bind(this)}>Click Change A Name of component</button>
        </div>
    }
}

Here's a question: why is it useless to write like this

class GreateH extends React.Component{
    static defaultProps = {
        name:''
    };
    constructor(props){
        super(props);
        this.state ={
            name:this.props.name
        }
    }
    changeBtn(){
        if(typeof this.props.click == 'function' ){
            this.props.click('CoCo');
        }
    };
    render(){
        return <div>
            // Change to this.props.name to detect the change
            <h2>hello,{this.state.name}</h2>
            <button onClick={this.changeBtn.bind(this)}>Click Change A Name of component</button>
        </div>
    }
}

This problem will be solved later