簡單介紹React 元件之間的通訊方式

本篇文章主要介紹了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 || &#39;滴滴&#39;}</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中文網其他相關文章！