React组件间通信的三种方法（简单易用）.docx

第

React组件间通信的三种方法（简单易用）

div#13ce66,padding:10px,width:200px,margin:auto,marginTop:20px}}

p通过context传过来：/p

spanblue}}{this.context.text}/span

divButtonthis.toParent}context向上/Button/div

/div

exportdefaultGrandson

默认的页面为：

点击按钮之后，执行context中的回调，向上传值。

不管层级有多深，都可以使用context进行向下或向上传值。

注意：在下层组件中取的context中的字段需与value中传递字段保持一致。text与toParent

以上就是Context的大致使用，更多细节请往React官方文档：

Context–React

三、兄弟（无嵌套）组件通信

当两个组件互不嵌套，处在同个层级或者不同层级上，他们之间要进行通信，有以下几种常用方法

1、某个组件先将值传到同一个父组件，然后在通过父组件传给另外一个组件，用到父子组件传值

2、使用缓存sessionStorage、localStorage等

3、如果两个组件之间存在跳转，可以使用路由跳转传值，附上详细用法

React学习笔记--组件通信之路由传参（react-router-dom）_前端菜小白leo的博客-CSDN博客

4、event（发布--订阅）

首先，安装event

npminstallevent-save

新建一个event.js

import{EventEmitter}fromevents;

exportdefaultnewEventEmitter();

然后另两个组件处于同层级（不同个父组件或者不同层级都可以）

importReactfromreact;

importGrandsonfrom./Grandson;

importGrandsonOtherfrom./GrandsonOther;

classChildrenextendsReact.Component{

render(){

return(

div

Grandson/Grandson

GrandsonOther/GrandsonOther

/div

exportdefaultChildren

组件一，导入event，在componentDidMount阶段添加监听addListener（订阅），在componentWillUnmount移除监听removeListener，事件名称与组件二中emit一致。

importReactfromreact;

importeventfrom../event;

import{Button}fromelement-react

classGrandsonextendsReact.Component{

constructor(props){

super(props);

this.state={

msg:

this.toOther=this.toOther.bind(this)

toOther(){

event.emit(eventMsg,通过evnet传过来的值)

render(){

return(

div#13ce66,padding:10px,width:200px,margin:auto,marginTop:20px}}

p组件二/p

spanblue}}{this.state.msg}/span

divButtonthis.toOther}event传值/Button/div

/div

exportdefaultGrandson

组件二，导入event，按钮绑定方法，使用event.emit触发（发布）事件。

importReactfromreact;

importeventfrom../event;

import{Button}fromelement-react

classGrandsonextendsReact.Component{

constructor(props){

s