1. 程式人生 > >React 元件通訊

React 元件通訊

react中我們都知道元件間的通訊幾乎都是通過props或者回調函式形式進行傳遞(子元件呼叫獲取父元件),但是實際開發中會因為元件劃分或者業務需求,不得不在父元件中呼叫子元件的方法(操作父元件來呼叫子元件的方法,來改變子元件的state)。

import reacr {Component} from 'react';

class Parent extends Component {
    
    onRef = (e) => {
        this.child = e;//將子元件this賦值給父元件的child
    }
    
    parentFunction = () => {
        this.child.childFunction();//父元件呼叫子元件方法
    }
    
    render (){
        return(
           <div>
           <Child onRef={this.onRef}/>//自定義子元件屬性傳遞給子元件
           <button onClick={()=>this.parentFunction()}/>
           </div>
        )
    }
}

import react {Component} from 'react';

class Child extends Compontnt {
    
    childFunction = () => {
        alert('success!');
    }
    
    componentDidMount(){
        //判斷邏輯等等
        this.props.onRef(this);//將子元件的this傳給父元件中<Child/>定義的的onRef的onRef方法;
    }
}

專案中未整合Redux或Mobx可用以上方法在父元件中呼叫子元件方法,下篇會講解reacr16.3中新增createRef()