react子元件向父元件通訊有兩種方法:回呼函數和自訂事件機制;但有時用自訂事件會顯然過於複雜,所以一般用回呼函數,父元件事先定義好回呼函數,並將回呼函數傳遞給子元件,子元件呼叫回呼函數,向父元件通訊。
本教學操作環境:windows7系統、react16版,此方法適用於所有品牌電腦。
React子元件向父元件通訊
#在React 中,子元件向父元件通訊可以使用兩種方法實作:
1、利用回呼函數:這是JavaScript 靈活方便之處,這樣就可以拿到執行時間狀態。
2、 利用自訂事件機制:這種方法更通用,使用也更廣泛。設計元件時,考慮加入事件機制往往可以達到簡化元件 API 的目的。
但有時用自訂事件會顯然過於複雜,為了達到目的,一般會選擇較為簡單的方法。
子元件向父元件通訊一般用回呼函數,父元件事先定義好回呼函數,並將回呼函數傳遞給子元件,子元件呼叫回呼函數,向父元件通訊。
回呼函數
實作在子元件中點選隱藏元件按鈕可以將自身隱藏的功能
List3.jsx
import React, { Component } from 'react'; import PropTypes from 'prop-types'; class List3 extends Component { static propTypes = { hideConponent: PropTypes.func.isRequired, } render() { return ( <div> 哈哈,我是List3 <button onClick={this.props.hideConponent}>隐藏List3组件</button> </div> ); } } export default List3;
App.jsx
import React, { Component } from 'react'; import List3 from './components/List3'; export default class App extends Component { constructor(...args) { super(...args); this.state = { isShowList3: false, }; } showConponent = () => { this.setState({ isShowList3: true, }); } hideConponent = () => { this.setState({ isShowList3: false, }); } render() { return ( <div> <button onClick={this.showConponent}>显示Lists组件</button> { this.state.isShowList3 ?<List3 hideConponent={this.hideConponent} />:null } </div> ); } }
觀察一下實作方法,可以發現它與傳統回呼函數的實作方法一樣.而且setState一般與回呼函數均會成對出現,因為回呼函數即是轉換內部狀態是的函數傳統;
更多程式相關知識,請造訪:程式設計學習! !
以上是react子向父通訊有哪些方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!