React如何實(shí)現(xiàn)跨級(jí)組件通信

這篇文章主要介紹React如何實(shí)現(xiàn)跨級(jí)組件通信，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

跨級(jí)組件通信

假設(shè)一個(gè)父組件中存在一個(gè)子組件，這個(gè)子組件中又存在一個(gè)子組件，暫且稱為“孫組件”，當(dāng)父組件需要與“孫組件”通信時(shí)，常用的方式有兩種，逐層傳值與跨層傳值。

1、逐層傳值

這種方式就是上面的直接父子通信的基礎(chǔ)上在加上一個(gè)中間層。如父、“孫”組件通信，可以先父子通信，然后再子“孫”通信，傳遞的層級(jí)變成父-->子-->“孫”，同理，通過(guò)props往下傳，通過(guò)回調(diào)往上傳。不展開(kāi)，有興趣的自己動(dòng)手實(shí)現(xiàn)一下。

2、跨級(jí)傳值

顧名思義，父跟“孫”通信，不需要經(jīng)過(guò)子（中間層）組件。這里引出了Context。

React官方文檔對(duì)Context做出了解釋：

在一個(gè)典型的 React 應(yīng)用中，數(shù)據(jù)是通過(guò) props 屬性自上而下（由父及子）進(jìn)行傳遞的，但這種做法對(duì)于某些類(lèi)型的屬性而言是極其繁瑣的（例如：地區(qū)偏好，UI 主題），這些屬性是應(yīng)用程序中許多組件都需要的。Context 提供了一種在組件之間共享此類(lèi)值的方式，而不必顯式地通過(guò)組件樹(shù)的逐層傳遞 props。

一句話概括就是：跨級(jí)傳值，狀態(tài)共享。

看下簡(jiǎn)單的實(shí)例，直接講用法。

首先，我先創(chuàng)建一個(gè)context.js文件（與父子孫同個(gè)目錄），默認(rèn)值為一個(gè)對(duì)象。

import React from "react";
const MyContext = React.createContext({text:'luck'});
export default MyContext

然后，對(duì)父組件進(jìn)行改寫(xiě)，引入context，使用一個(gè) Provider 來(lái)將當(dāng)前的 value 傳遞給以下的組件樹(shù)，value為傳遞的值。

import React from 'react';
import Children from './Children';
import MyContext from './context';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
  }
  // 使用一個(gè) Provider 來(lái)將當(dāng)前的 value 傳遞給以下的組件樹(shù)。
  // 無(wú)論多深，任何組件都能讀取這個(gè)值。
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>context通信實(shí)例</p>
        <MyContext.Provider value={{text:'good luck'}}>
          <Children></Children>
        </MyContext.Provider>
      </div>
    )
  }
}
 
export default Parent

子組件為中間層，不做處理，用于包裹“孫”組件。

import React from 'react';
import Grandson from './Grandson';
 
class Children extends React.Component {
  render(){
    return (
      <div>
        <Grandson></Grandson>
      </div>
    )
  }
}
 
export default Children

新增一個(gè)“孫”組件，同樣需引入context，在組件內(nèi)部添加static contextType = MyContext，此時(shí)將能通過(guò)this.context直接獲取到上層距離最近的Provider傳遞的值，此時(shí)this.context = {text:good luck}，即父組件傳遞value。

import React from 'react';
import MyContext from './context';
 
class Grandson extends React.Component {
  static contextType = MyContext
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>通過(guò)context傳過(guò)來(lái)：</p>
        <span style={{color:'blue'}}>{this.context.text}</span>
      </div>
    )
  }
}
 
export default Grandson

通過(guò)this.context.text獲取到傳遞的值。

 以上的是一個(gè)父-->孫的過(guò)程，即向下的流程，如果想孫-->父向上傳值，可以通過(guò)回調(diào)的方式

對(duì)父組件進(jìn)行傳值修改，在傳過(guò)來(lái)的對(duì)象中添加一個(gè)屬性，里面綁定父組件的方法value={{text:'good luck',toParent:this.fromGranson}}

import React from 'react';
import Children from './Children';
import MyContext from './context';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
    this.state = {
      msg:''
    };
    this.fromGranson = this.fromGranson.bind(this)
  }
  fromGranson(val){
    this.setState({
      msg:val
    })
  }
  // 使用一個(gè) Provider 來(lái)將當(dāng)前的 theme 傳遞給以下的組件樹(shù)。
  // 無(wú)論多深，任何組件都能讀取這個(gè)值。
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>context通信實(shí)例</p>
        <span style={{color:'red'}}>{this.state.msg}</span>
        <MyContext.Provider value={{text:'good luck',toParent:this.fromGranson}}>
          <Children></Children>
        </MyContext.Provider>
      </div>
    )
  }
}
 
export default Parent

然后在孫組件中添加一個(gè)按鈕，綁定方法，執(zhí)行函數(shù)回調(diào)

toParent(){
    this.context.toParent('孫組件向父組件傳數(shù)據(jù)')
 }

import React from 'react';
import MyContext from './context';
import { Button } from 'element-react'
 
class Grandson extends React.Component {
  static contextType = MyContext
  constructor(props) {
		super(props);
    this.toParent = this.toParent.bind(this)
	}
  toParent(){
    this.context.toParent('孫組件向父組件傳數(shù)據(jù)')
  }
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>通過(guò)context傳過(guò)來(lái)：</p>
        <span style={{color:'blue'}}>{this.context.text}</span>
        <div><Button onClick={this.toParent}>context向上</Button></div>
      </div>
    )
  }
}
 
export default Grandson

默認(rèn)的頁(yè)面為：

 點(diǎn)擊按鈕之后，執(zhí)行context中的回調(diào)，向上傳值。

 不管層級(jí)有多深，都可以使用context進(jìn)行向下或向上傳值。

注意：在下層組件中取的context中的字段需與value中傳遞字段保持一致。text與toParent

以上是“React如何實(shí)現(xiàn)跨級(jí)組件通信”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！