React 元件通訊
阿新 • • 發佈:2018-12-21
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()