react組件之間的幾種通信情況

組件之間的幾種通信情況

• 父組件向子組件通信
• 子組件向父組件通信
• 跨級組件通信
• 沒有嵌套關系組件之間的通信

1,父組件向子組件傳遞

React數據流動是單向的,父組件向子組件通信也是最常見的;父組件通過props向子組件傳遞需要的信息

在引用子組件的時候傳遞，相當於一個屬性，例如：

//父組件
class Parent extends Component{
  state = {
    msg: 'start'
  };

  render() {
    return <Child parms={this.state.msg} />; //父組件引用子組件時，將state狀態數據以屬性的方式傳遞給子組件props對象的parms屬性中
  }
}
//子組件
class Child extends Component{

　　constructor(...args){

　　　　super(...args); //調用父類的 constructor(x, y),繼承父組件的this對象，這是因為子類沒有自己的this對象，而是繼承父類的this對象,

　　　　　　　　　　　　　　//只有render時，可以不用寫,在render函數以外要使用this，就得調用super()方法

　　}

  render() {
    return <p>{this.props.parms}</p> //子組件通過this.props.parms使用父組件傳遞過來的值

 } }

 

2,子組件向父組件傳遞

• 利用回調函數
• 利用自定義事件機制

子組件通過 調用父組件傳遞到子組件的方法  讓父組件自己去修改自己的狀態值。

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

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

　　　<Child name={this.state.name} parent={this} /> //將整個this傳遞給子組件

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

this.props.parent.fn(666);//子組件使用props.parent的整個父組件可以任意調用父組件下的函數

完整代碼:

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>
  }
}