反应知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，本文就详细的介绍一下，感兴趣的可以了解一下
目录
一、父子组件通信二、跨级组件通信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组件之间通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
