react開發教程（八）React組件通信

kamushin233 發布于2019-08-21 11:51 / 848人閱讀

摘要：父子組件通訊通訊手段這是最常見的通信方式，父組件只需要將子組件需要的傳給子組件，子組件直接通過來使用。

父子組件通訊

通訊手段
這是最常見的通信方式，父組件只需要將子組件需要的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 = ();
        }
        return leftDOM;
    }
    

    renderRightComponent() {
        if (this.props.renderRightComponent) {
            return this.props.renderRightComponent();
        }
    }

    goBack() {
        alert("返回上一頁")
    }

    render() {
        return (
            
                {this.renderLeftComponent()}
                {this.props.title || "滴滴"}
                {this.renderRightComponent()}
            
        );
    }
}

export default Header;

//父親組件部分代碼App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
  return (
    左邊按鈕
  )
}
class App extends Component {

  render() {
    return (
      
        
      
    );
  }
}

子父組件通訊

父-子組件通信的手段是通過子組件的props是子組件用父組件的東西，子-父組件通信，是父組件用子組件的東西，暫時了解的兩種方法

利用回調函數

父組件通過props傳遞一個方法給子組件，子組件通過props方法將子組件數據傳遞給父組件

利用ref

父組件通過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() {
        
            
        
    }
}


// Component Child1
class Child1 extends React.Component {
    // 添加下面屬性
    static contextTypes = {
        color: React.PropTypes.string
    }
    
    render() {
        {this.context.color}
    }
}

同級組件通信

同級組件之間的通信還是需要通過父組件作為中介，利用多次父-子組件通信，項目中將需要傳遞的數據放在了父組件的state中，變動時可以自動的同步傳遞。

GPU云服務器云服務器 react開發神器 docker react 開發 webrtc音視頻開發react react

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87200.html

react開發教程（九）redux基礎

摘要：案例代碼定義計算規則，即個商品價值戀人結算完成，當前購物車為空單身狗根據計算規則生成定義數據即變化之后的派發規則觸發數據變化上一篇開發教程八組件通信下一篇開發教程十結合 Readux基礎什么是redux？簡單點回答就是，一個管理數據的全局對象，但是它有單一狀態樹的概念，所謂的單一狀態樹，就是指所有的 state都以一個對象樹的形式儲存在一個單一的 store 中。頁面中的所有狀...

muzhuyu 2019-08-21 17:53 評論0 收藏0
全棧 React + GraphQL 教程（一）

摘要：然而，盡管使用有諸多好處，但邁出第一步可能并不容易。為了簡化初始教程，我們今天只構建一個簡單的列表視圖。是我們將在本教程系列中使用的客戶端的名稱。我們將列表組件命名為。在本教程的其余部分中，你將了解到我們構建一個真正的通信應用的基礎。首發于眾成翻譯 Part 1——前端：使用 Apollo 聲明式地請求和 mock 數據 showImg(http://p0.qhimg.com/t0...

luxixing 2019-08-21 17:01 評論0 收藏0
React Router 使用教程(阮一峰)

摘要：它是官方維護的，事實上也是唯一可選的路由庫。表示的這個部分是可選的。另一種做法是，使用指定當前路由的。而組件會使用路徑的精確匹配。否則用戶直接向服務器請求某個子路由，會顯示網頁找不到的錯誤。真正學會 React 是一個漫長的過程。你會發現，它不是一個庫，也不是一個框架，而是一個龐大的體系。想要發揮它的威力，整個技術棧都要配合它改造。你要學習一整套解決方案，從后端到前端，都是全新的做...

Yang_River 2019-08-20 17:03 評論0 收藏0