React非嵌套组件通信

原创 守候你的季节 随笔 JavaScript 212阅读 2017-12-10 13:58:36 举报

非嵌套组件: 就是没有任何包含关系的组件,包括兄弟组件以及不再同一个父级的非兄弟组件
针对这种情况的组件通信,常用两种方式处理
[ol]
[li]利用二者共同父级组件的context对象进行通信[/li]
[li]自定义事件方式进行通信[/li]
[/ol]

第一种方式所使用的context对象类似一个全局变量,有可能会造成全局污染,官方也是推荐尽可能不使用.

下面说说第二种使用方式,其实也非常简单,类似angular中的服务依赖注入的方式.
这种方式需要使用用来自定义事件的event包,下面先安装
javascript 代码

组件结构: App组件为根组件,根组件里面有两个兄弟组件,Child1,Child2, 用于在Child1和Child2组件进行通信的Event服务.下面实现Child1组件与Child2组件之间的通信

Event.js(服务)
javascript 代码

App组件
javascript 代码

Child1组件
javascript 代码

Child2组件
javascript 代码

评论 ( 2 )
最新评论
守候你的季节 1F 2017-12-11 09:56:24 2F

对于状态管理复杂的项目来说,redux确实是最适合的

老姚 2017-12-11 09:49:22 1F

redux