本文小編為大家詳細(xì)介紹“React組件間怎么通信”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“React組件間怎么通信”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供岳麓網(wǎng)站建設(shè)、岳麓做網(wǎng)站、岳麓網(wǎng)站設(shè)計(jì)、岳麓網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、岳麓企業(yè)網(wǎng)站模板建站服務(wù)，10多年岳麓做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

一、父子組件通信

原理：父組件通過(guò)props（與vue中的props區(qū)分開(kāi)）向子組件通信，子組件通過(guò)回調(diào)事件與父組件通信。

首先，先創(chuàng)建一個(gè)父組件Parent.js跟子組件Children.js，二者的關(guān)系為直接父子關(guān)系。

Parent.js父組件如下，給父組件一個(gè)默認(rèn)狀態(tài)state，引入子組件，通過(guò)在子組件加上toChildren={this.state.msg}，該處即為向子組件傳props。

import React from 'react';
import { Button } from 'element-react';
import Children from './Children';

class Parent extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:'父組件傳遞給子組件'
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  changeMsg(){
    this.setState({
      msg:'父組件傳遞給子組件（改變之后的內(nèi)容）'
    })
  }
  render(){
    return (
      <p style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>父子組件通信實(shí)例</p>
        <Button onClick={this.changeMsg}>父?jìng)髯?lt;/Button>
        <Children toChildren={this.state.msg}></Children>
      </p>
    )
  }
}

export default Parent

Children.js子組件如下，初始狀態(tài)通過(guò)props拿到父組件傳過(guò)來(lái)的值。

import React from 'react';

class Children extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:this.props.toChildren   //通過(guò)props拿到父組件傳過(guò)來(lái)的值
	};
  }
  render(){
    return (
      <p style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>從父組件傳過(guò)來(lái)：</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
      </p>
    )
  }
}

export default Children

注意：子組件取值時(shí)應(yīng)與父組件放在子組件的字段props一致，即本例中的 toChildren，如下

那么子組件想向父組件傳值（向上傳值），可以通過(guò)調(diào)用父組件傳過(guò)來(lái)的回調(diào)函數(shù)

在Parent.js中向Children.js中加入回調(diào)函數(shù)callback，綁定changeMsg方法

import React from 'react';
import Children from './Children';

class Parent extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
	    msg:'父組件傳遞給子組件',
        fromChildrn:''
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  changeMsg(val){
    this.setState({
      fromChildrn: val
    })
  }
  render(){
    return (
      <p style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>父子組件通信實(shí)例</p>
        <span style={{color:'red'}}>{this.state.fromChildrn}</span>
        <Children toChildren={this.state.msg} callback={this.changeMsg}></Children>
      </p>
    )
  }
}

export default Parent

在子組件中，用this.props.callback()執(zhí)行父組件的回調(diào)函數(shù)，從而執(zhí)行綁定方法changeMsg，顯示子組件傳過(guò)來(lái)的值

import React from 'react';
import { Button } from 'element-react';

class Children extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:this.props.toChildren
	};
    this.toParent = this.toParent.bind(this)
  }
  toParent(){
    this.props.callback('子組件傳過(guò)來(lái)的值')   //子組件通過(guò)此觸發(fā)父組件的回調(diào)方法
  }
  render(){
    return (
      <p style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>從父組件傳過(guò)來(lái)：</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <Button onClick={this.toParent}>子傳父</Button>
      </p>
    )
  }
}

export default Children

注意：props中的回調(diào)函數(shù)名稱需一致，即本例中的callback，如下

小結(jié)： 以上為直接父子組件通信的其中一種方式，父?jìng)髯?，通過(guò)props；子傳父，執(zhí)行回調(diào)。

二、跨級(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ì)于某些類型的屬性而言是極其繁瑣的（例如：地區(qū)偏好，UI 主題），這些屬性是應(yīng)用程序中許多組件都需要的。Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過(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 (
      <p 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>
      </p>
    )
  }
}

export default Parent

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

import React from 'react';
import Grandson from './Grandson';

class Children extends React.Component {
  render(){
    return (
      <p>
        <Grandson></Grandson>
      </p>
    )
  }
}

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 (
      <p 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>
      </p>
    )
  }
}

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 (
      <p 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>
      </p>
    )
  }
}

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 (
      <p 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>
        <p><Button onClick={this.toParent}>context向上</Button></p>
      </p>
    )
  }
}

export default Grandson

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

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

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

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

以上就是Context的大致使用，更多細(xì)節(jié)請(qǐng)往React官方文檔：

Context – Reacthttps://react.docschina.org/docs/context.html

三、兄弟（無(wú)嵌套）組件通信

當(dāng)兩個(gè)組件互不嵌套，處在同個(gè)層級(jí)或者不同層級(jí)上，他們之間要進(jìn)行通信，有以下幾種常用方法

1、某個(gè)組件先將值傳到同一個(gè)父組件，然后在通過(guò)父組件傳給另外一個(gè)組件，用到父子組件傳值

2、使用緩存sessionStorage、localStorage等

3、如果兩個(gè)組件之間存在跳轉(zhuǎn)，可以使用路由跳轉(zhuǎn)傳值，附上詳細(xì)用法

React學(xué)習(xí)筆記 -- 組件通信之路由傳參（react-router-dom）_前端菜小白leo的博客-CSDN博客

4、event（發(fā)布--訂閱）

首先，安裝event

npm install event -save

新建一個(gè)event.js

import { EventEmitter } from 'events';
export default new EventEmitter();

然后另兩個(gè)組件處于同層級(jí)（不同個(gè)父組件或者不同層級(jí)都可以）

import React from 'react';
import Grandson from './Grandson';
import GrandsonOther from './GrandsonOther';

class Children extends React.Component {
  render(){
    return (
      <p>
        <Grandson></Grandson>
        <GrandsonOther></GrandsonOther>
      </p>
    )
  }
}

export default Children

組件一，導(dǎo)入event，在componentDidMount階段添加監(jiān)聽(tīng)addListener（訂閱），在componentWillUnmount移除監(jiān)聽(tīng)removeListener，事件名稱與組件二中emit一致。

import React from 'react';
import event from '../event';

class Grandson extends React.Component {
  constructor(props) {
	super(props);
    this.state = {
      msg:''
    }
  }
  componentDidMount(){
    event.addListener('eventMsg',val => {
      this.setState({
        msg:val
      })
    })
  }
  componentWillUnmount(){
    event.removeListener('eventMsg')
  }
  render(){
    return (
      <p style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>組件一</p>
        <p>通過(guò)event傳過(guò)來(lái)：</p>
        <span style={{color:'red'}}>{this.state.msg}</span>
      </p>
    )
  }
}

export default Grandson

組件二，導(dǎo)入event，按鈕綁定方法，使用event.emit觸發(fā)（發(fā)布）事件。

import React from 'react';
import event from '../event';
import { Button } from 'element-react'

class Grandson extends React.Component {
  constructor(props) {
	super(props);
    this.state = {
      msg:''
    }
    this.toOther = this.toOther.bind(this)
  }
  toOther(){
    event.emit('eventMsg','通過(guò)evnet傳過(guò)來(lái)的值')
  }
  render(){
    return (
      <p style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>組件二</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <p><Button onClick={this.toOther}>event傳值</Button></p>
      </p>
    )
  }
}

export default Grandson

點(diǎn)擊按鈕，組件二發(fā)布事件，組件一監(jiān)聽(tīng)（訂閱）事件，更新內(nèi)容。（如果交換發(fā)布者訂閱者身份，寫(xiě)法一致）

注意：如果兩個(gè)組件使用event進(jìn)行通信，確保發(fā)布訂閱的事件名稱一致，如上例中 eventMsg

小結(jié)： event的方式比較靈活，不管是父子、跨級(jí)、還是同級(jí)，甚至毫無(wú)關(guān)聯(lián)的組件，都可以使用此方式進(jìn)行通信。

讀到這里，這篇“React組件間怎么通信”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：React組件間怎么通信
本文路徑：http://chinadenli.net/article2/pipcic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、營(yíng)銷型網(wǎng)站建設(shè)、用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、動(dòng)態(tài)網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)