首頁 > web前端 > js教程 > 主體

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

巴扎黑
發布: 2017-08-15 10:03:22
原創
1475 人瀏覽過

本篇文章主要介紹了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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!