react 父子組件互相通信

1,父組件向子組件傳遞

在引用子組件的時候傳遞，相當於一個屬性，例如： ;在子組件內通過porps.param獲取到這個param的值。

class Parent extends Component{
  state = {
    msg: 'start'
  };

  render() {
    return <Child parms={this.state.msg} />;
  }
}

class Child extends Component{
  render() {
    return <p>{this.props.parms}</p>
  }
}

2,子組件向父組件傳遞

子組件通過 調用父組件傳遞到子組件的方法 向父組件傳遞消息的。

父組件向子組件傳遞函數：

     <Child parm={this.state.msg} transMsg={msg=>this.transMsg(msg)}/>

子組件調用父組件函數：
this.props.transMsg(parms);

完整代碼:

    
 class Parent extends Component{
 
    constructor(props) {
        super(props);
        state = {
            msg: 'start'
        };
    }
    transMsg(types){
      	var newOrders = [];
      	for(let type of types){
      		if(type)
      		alert(type);
      	}
      	
      }
  render() {
    return <Child parms={this.state.msg} />;
  }
}
class Child extends Component{
    
     constructor(props) {
        super(props);
        // call parent component
        console.log("parms :",this.props.parms);
       this.props.transMsg("hi ~~");
    }
  render() {
    return <p>{this.props.parms}</p>
  }
}