React parent component sub-assemblies trigger event

Parent Component

React from Import "REACT"; 
Import from Child "./component/Child"; 

class the extends the Parent {React.Component 
  the render () { 
    return ( 
      < div > 
        I parent element 
        < Child childEvevnt = {} this.childEvevnt /> 
        < Button the onClick = {} this.triggerEvevt > trigger sub </ Button > 
      </ div > 
    ); 
  } 
  // this event sink subobject 
  childEvevnt childDate = => { 
    the this child $ = childDate;. 
  }; 
  // trigger sub parent component event component 
  triggerEvevt = () => { 
    . the this $ child.alertEvevnt (); 
  };
}

export default Parent;

Child Components

React from Import "REACT"; 
class Child {React.Component the extends 
  the render () { 
    return < div > I sub-assembly </ div > ; 
  } 
  componentDidMount () { 
    this.props.childEvevnt (the this); 
  } 
  // parent component event to be triggered 
  alertEvevnt = () => { 
    Alert ( "father calling for me !!"); 
  }; 
} 
Export default Child;

 important point:

     1. Use the arrow function, this refers to an error carefully

　　（）=>  {  }

     2. parent components received by the props pass over the sub-component object reference   

　　 <Child childEvevnt={this.childEvevnt} />

     3. The sub internal components are passed 

　　componentDidMount() {

　　　　this.props.childEvevnt(this);

　　}

      4. parent component received over the child object bound to the parent custom event

　　childEvevnt = childDate => {

　　　　this.$child = childDate;

　　};

      5. internal event triggers the parent component sub-assemblies

      　　this. With the sub-components of the event on $ child

      6. Trigger

　　triggerEvevt = () => {

　　　　this.$child.alertEvevnt();

　　};