本篇文章主要介紹了react開發教程之React組件通訊詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
這兩天學習了React感覺組件通信這個地方知識點挺多的,而且很重要,所以,今天添加一點小筆記。
父子元件通訊
#通訊手段
這是最常見的通訊方式,父元件只需要將子元件所需的props傳給子元件,子元件直接透過this.props來使用。
通訊內容
更多要提的是如何合理的設定子元件的props,要想將子元件設計成複用性強的通用元件,需要將能夠重複使用的部分抽象化出來,抽象化的props有兩種形成,一種是簡單的變量,另一種是抽像出來處理某種邏輯函數。
以Header 元件為例
//HeaderBar.jsx 子组件 import React, { Component } from 'react'; class Header extends Component { constructor() { super(); this.handleClick = (e) => { console.log(this) } } renderLeftComponent() { let leftDOM = {}; if (this.props.renderLeftComponent) { return this.props.renderLeftComponent(); } if (this.props.showBack) { let backFunc = this.props.onBack || this.goBack; leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>); } return leftDOM; } renderRightComponent() { if (this.props.renderRightComponent) { return this.props.renderRightComponent(); } } goBack() { alert("返回上一页") } render() { return ( <header className="header-bar"> {this.renderLeftComponent()} <span>{this.props.title || '滴滴'}</span> {this.renderRightComponent()} </header> ); } } export default Header; //父亲组件部分代码App.jsx import HeaderBar from "./components/Header"; let leftIcon = function () { return ( <a><i className="icon left-icon icon-left-haha"></i>左边按钮</a> ) } class App extends Component { render() { return ( <p className="App"> <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} /> </p> ); } }
子父元件通訊
父-子組件通信的手段是透過子組件的props是子組件用父組件的東西,子-父組件通信,是父組件用子組件的東西,暫時了解的兩種方法
利用回呼函數
父元件透過props傳遞一個方法給子元件,子元件透過props方法將子元件資料傳遞給父元件
利用ref
父元件透過refs呼叫子元件的屬性
父元件透過refs呼叫子元件的屬性
跨級元件通信
在React中當一個屬性重複使用並且存在與好幾個子組件中的時候,這個時候我們如果透過props一級一級傳遞的話可以實現多層級訪問,但是這樣出現一個問題就是會使程式碼非常混亂,在React中國年,我們還可以使用context 來實現跨級父子組件間的通信;
在react中context稱為蟲洞
// Component 父级 class parentComponent extends React.Component { // add the following property static childContextTypes = { color: React.PropTypes.string } // 添加下面方法 getChildContext() { return { color: "#f00" } } render() { <p> <Child1 /> </p> } } // Component Child1 class Child1 extends React.Component { // 添加下面属性 static contextTypes = { color: React.PropTypes.string } render() { <p>{this.context.color}</p> } }
同級元件通訊
#############同級元件之間的通訊還是需要透過父組件作為中介,利用多次父-子組件通信,專案中將需要傳遞的資料放在了父組件的state中,變動時可以自動的同步傳遞。 ###以上是簡單介紹React 元件之間的通訊方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!