反应知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，本文就详细的介绍一下，感兴趣的可以了解一下

目录

一、父子组件通信二、跨级组件通信1、逐层传值2、跨级传值三、兄弟（无嵌套)组件通信四、路由传值五、还原反应知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏。

一、父子组件通信

原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。

首先，先创建一个父组件Parent.js跟子组件Children.js二者的关系为直接父子关系。

Parent.js父组件如下，给父组件一个默认状态状态，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传道具。

从“做出反应”导入做出反应；

从"元素-反应"导入{ Button }；

从'导入孩子./儿童'；

类父扩展做出反应.组件{

施工员（道具){

超级（道具);

this.state={

'消息：'父组件传递给子组件'

};

这个。改msg=这个。换味精。装订(这个)

}

changeMsg(){

this.setState({

'消息：'父组件传递给子组件（改变之后的内容)'

})

}

render(){

返回（

div style={ {背景色：' # f7ba 2a '，填充：' 20像素'，宽度：' 500像素'，边距：' auto '，textAlign:'center'}}

p父子组件通信实例/p

Button onClick={this.changeMsg}父传子/按钮

儿童到儿童={这个。状态。msg }/儿童

/div

)

}

}

导出默认父项

儿童。射流研究…子组件如下，初始状态通过小道具拿到父组件传过来的值。

从“做出反应”导入做出反应；

班级儿童延伸反应。组件{

施工员（道具){

超级（道具);

this.state={

msg:this.props.toChildren //通过小道具拿到父组件传过来的值

};

}

render(){

返回（

div style={ {背景色：' # 13ce 66 '，填充：' 10px '，宽度：' 200像素'，边距：' auto '，marginTop:'20px'}}

p从父组件传过来：/p

span style={ { color:' blue ' } } { this。状态。msg }/span

/div

)

}

}

导出默认子项

注意：子组件取值时应与父组件放在子组件的字段小道具一致，即本例中的toChildren,如下

那么子组件想向父组件传值（向上传值),可以通过调用父组件传过来的回调函数

在Parent.js中向儿童。射流研究…中加入回调函数回拨，绑定changeMsg方法

从“做出反应”导入做出反应；

从'导入孩子./儿童'；

类父扩展做出反应.组件{

施工员（道具){

超级（道具);

this.state={

'消息：'父组件传递给子组件，

fromChildrn:" "

};

这个。改msg=这个。换味精。装订(这个)

}

changeMsg(val){

this.setState({

瓦尔

})

}

render(){

返回（

div style={ {背景色：' # f7ba 2a '，填充：' 20像素'，宽度：' 500像素'，边距：' auto '，textAlign:'center'}}

p父子组件通信实例/p

span style={ { color:' red ' } } { this。状态。来自儿童rn }/span

孩子对孩子={这个。状态。msg }回调={ this。更改邮件}/儿童

/div

)

}

}

导出默认父项

在子组件中，用this.props.callback()执行父组件的回调函数，从而执行绑定方法changeMsg，显示子组件传过来的值

从“做出反应”导入做出反应；

从"元素-反应"导入{ Button }；

班级儿童延伸反应。组件{

施工员（道具){

超级（道具);

this.state={

msg:this.props.toChildren

};

这个。到父=这个。敬父母。装订(这个)

}

顶级父项(){

this.props.callback('子组件传过来的值') //子组件通过此触发父组件的回调方法

}

render(){

返回（

div style={ {背景色：' # 13ce 66 '，填充：' 10px '，宽度：' 200像素'，边距：' auto '，marginTop:'20px'}}

p从父组件传过来：/p

span style={ { color:' blue ' } } { this。状态。msg }/span

Button onClick={this.toParent}子传父/按钮

/div

)

}

}

导出默认子项

注意：props中回调函数的名字要一致，即本例中的callback，如下

小结:以上是直接父子组件通信的方式之一，通过道具从家长传给孩子；将其传递给父进程并执行回调。

二、跨级组件通信

假设一个父组件中有一个子组件，这个子组件中又有一个子组件，暂且称为“子组件”。当父组件需要与“子组件”通信时，常见的方式有两种：逐层传递值和跨层传递值。

1、逐层传值

这种方式就是在上面直接亲子沟通的基础上，再加一个中间层。比如父子组件通信，可以先互相通信，再互相通信。传播层面就变成了亲子孙。同样可以通过道具传承，通过回调上传。不，如果你有兴趣，你自己做吧。

2、跨级传值

顾名思义，父亲与“孙子”沟通，不经过子(中间层)组件。Context在此介绍。

React官方文档解释了上下文：

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

一言以蔽之：跨级传值，状态共享。

看一个简单的例子，直接说用法。

首先，我将创建一个context.js文件(带有父子孙同目录)，默认值是一个对象。

从“React”导入React；

const my context=react . create context({ text:' luck ' })；

导出默认MyContext

然后，重写父组件，引入上下文，使用Provider将当前值传递给下面的组件树，value就是传递的值。

从“React”导入React；

从'导入孩子。/Children’；

从'导入MyContext。/context '；

类父扩展React。组件{

施工员(道具){

超级(道具)；

}

//使用提供程序将当前值传递给下面的组件树。

//不管有多深，任何组件都可以读取这个值。

render(){

返回(

div style={ { background color:' # f7ba 2a '，填充：' 20px '，宽度：' 500px '，边距：' auto '，textAlign:'center'}}

p上下文通信实例/p

MyContext。提供商价值={{text:'祝您好运' }}

儿童/儿童

/MyContext。供应者

/div

)

}

}

导出默认父项

子组件是中间层，用于包装“孙子”组件，无需处理。

从“React”导入React；

从'导入孙子。/孙子'；

班级儿童延伸反应。组件{

render(){

返回(

差异

孙子/外孙

/div

)

}

}

导出默认子项

添加一个“太阳”组件，也需要引入上下文，并在组件内部添加static contextType = MyContext。此时可以通过this.context直接得到上一级最近的提供者传递的值，此时this.context={text:good luck}，即父组件传递值。

从“React”导入React；

从'导入MyContext。/context '；

课件孙子延伸反应。组件{

静态上下文类型=MyContext

render(){

返回(

div style={ { background color:' # 13ce 66 '，填充：' 10px '，宽度：' 200px '，边距：' auto '，marginTop:'20px'}}

通过上下文传递：/p

span style={ { color:' blue ' } } { this . context . text }/span

/div

)

}

}

导出默认子对象

通过this.context.text获取传递的值

以上是一个父子孙过程，也就是一个向下的过程。如果要上传值给父子孙，可以回调。

通过向传递的对象添加属性来修改父组件的值，其中父组件的方法值被绑定={{text:' goodluck '，toParent: this.fromgranson}}

从“React”导入React；

从'导入孩子。/Children’；

从'导入MyContext。/context '；

类父扩展React。组件{

施工员(道具){

超级(道具)；

this.state={

邮件：“”

};

this . fromgranson=this . fromgranson . bind(this)

}

fromGranson(val){

this.setState({

消息：val

})

}

//使用提供程序将当前主题传递给下面的组件树。

//不管有多深，任何组件都可以读取这个值。

render(){

返回(

div style={ { background color:' # f7ba 2a '，填充：' 20px '，宽度：' 500px '，边距：' auto '，textAlign:'center'}}

p上下文通信实例/p

span style={ { color:' red ' } } { this。状态。msg }/span

我的上下文.提供商值={{text:'祝您好运，toParent:this.fromGranson}}

儿童/儿童

/MyContext .供应者

/div

)

}

}

导出默认父项

然后在孙组件中添加一个按钮，绑定方法，执行函数回调

顶级父项(){

this.context.toParent('孙组件向父组件传数据)

}

从“做出反应”导入做出反应；

从'导入我的上下文./context '；

从"元素-反应"导入{ Button }

课件孙子延伸反应。组件{

静态上下文类型=MyContext

施工员（道具){

超级（道具);

这个。到父=这个。敬父母。装订(这个)

}

顶级父项(){

this.context.toParent('孙组件向父组件传数据)

}

render(){

返回（

div style={ {背景色：' # 13ce 66 '，填充：' 10px '，宽度：' 200像素'，边距：' auto '，marginTop:'20px'}}

p通过语境传过来：/p

span style={ { color:' blue ' } } { this。语境。text }/span

div按钮onClick={ this。给父母}上下文向上/按钮/div

/div

)

}

}

导出默认子对象

默认的页面为：

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

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

注意：在下层组件中取的语境中的字段需与价值中传递字段保持一致100 .文本与托帕兰特

以上就是语境的大致使用，更多细节请往反应官方文档：

背景反应

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

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

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

2、使用缓存会话存储、本地存储等

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

反应学习笔记-组件通信之路由传参(react-router-dom)_前端菜小白狮子座的博客CSDN博客

4、事件（发布-订阅)

首先，安装事件

npm安装事件-保存

新建一个event.js

从"事件"中导入{事件发射器}；

导出默认的新事件发射器()；

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

从“做出反应”导入做出反应；

从'导入孙子。/孙子；

从'导入孙子./孙子其他'；

班级儿童延伸反应。组件{

render(){

返回（

差异

孙子/外孙

孙子/外孙

/div

)

}

}

导出默认子项

组件一，导入事件，在组件安装阶段添加监听addListener（订阅）,在组件将卸载移除监听removeListener,事件名称与组件二中emit一致。

从“做出反应”导入做出反应；

'导入事件自'./event '；

从"元素-反应"导入{ Button }

课件孙子延展反应。组件{

施工员（道具){

超级（道具);

this.state={

邮件：""

}

this.toOther=this.toOther

}

toOther(){

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

}

render(){

返回（

div style={ {背景色：' # 13ce 66 '，填充：' 10px '，宽度：' 200像素'，边距：' auto '，marginTop:'20px'}}

p组件二/p

span style={ { color:' blue ' } } { this。状态。msg }/span

div按钮onClick={ this。toother }事件传值/按钮/div

/div

)

}

}

导出默认子对象

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

从“做出反应”导入做出反应；

'导入事件自'./event '；

从"元素-反应"导入{ Button }

课件孙子延展反应。组件{

施工员（道具){

超级（道具);

this.state={

邮件：""

}

this.toOther=this.toOther

}

toOther(){

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

}

render(){

返回（

div style={ {背景色：' # 13ce 66 '，填充：' 10px '，宽度：' 200像素'，边距：' auto '，marginTop:'20px'}}

p组件二/p

span style={ { color:' blue ' } } { this。状态。msg }/span

Button onclick={this.toother}事件传递值/Button/div

/div

)

}

}

导出默认子对象

点击按钮，组件2发布事件，组件1监控(订阅)事件，并更新内容。(如果发布者和订阅者的身份互换，则书写一致)

注意：如果两个组件使用event进行通信，请确保发布和订阅的事件名称是一致的，例如上面示例中的eventMsg。

总结：event的方法是灵活的，它可以用于与任何父子、跨级别、对等甚至不相关的组件进行通信。

四、路由传值

React学习笔记-react-router-dom用于组件通信

五、Redux

被释放。

总结：主要讲react中组件的常用通讯方式。在正常工作中，根据不同的应用场景选择不同的沟通方式，会让沟通过程更加简单明了。

对比Vue中组件的通信方式，你会发现很多相似之处：

Vue组件之间的通信(各种场景，容易理解，推荐收藏)

这就是本文关于React组件之间通信的三种方法(简单易用)。有关React组件之间通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。