前提准备四个文件,两个子组件:List、List2和一个events.js文件以及一个App.js父组件;

在src目录下创建events.js,里面的内容如下:

// events.js(以常用的发布/订阅模式举例,借用Node.js Events模块的浏览器版实现)
import { EventEmitter } from 'events';
export default new EventEmitter();

在src下创建pages文件夹,在该目录下创建List/index.js和List2/index.js

// List
import React, { Component } from 'react';
import emitter from '../../util/events';
class List extends Component {
constructor(props) {
super(props);
this.state = {
message: 'List1',
};
}
componentDidMount() {
// 组件装载完成以后声明一个自定义事件,也就是订阅事件
this.eventEmitter = emitter.addListener('changeMessage', (message) => {
this.setState({
message,
});
});
}
componentWillUnmount() {
// 取消订阅,就是销毁事件
emitter.removeListener(this.eventEmitter);
}
render() {
return (
<div>
{this.state.message}
</div>
);
}
}
export default List;
// List2
import React, { Component } from 'react';
import emitter from '../../util/events';
class List2 extends Component {
handleClick = (message) => {
// 发布事件,也就是触发事件
emitter.emit('changeMessage', message);
};
render() {
return (
<div>
<button onClick={this.handleClick.bind(this, 'List2')}>点击我改变List1组件中显示信息</button>
</div>
);
}
}
export default List2;

然后在App.js组件中,引入这两个组件;

引入:

import List1 from './pages/List';
import List2 from './pages/List2';

调用:

      <div>
<List1></List1>
<List2></List2>
</div>

效果图:

react 没有嵌套关系的组件通讯的更多相关文章

  1. React中嵌套组件与被嵌套组件的通信

    前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...

  2. Vue_(组件通讯)父子组件简单关系

    Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...

  3. React -- 3/100 】组件通讯

    通讯 | props | prop-types 组件通讯 Props: 组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props /* class */ .parent-box ...

  4. 十八、React react-router4.x中:实现路由模块化、以及嵌套路由父子组件传值

    一.路由模块化(用字典定义路由,然后循环出来) 1.官方文档参考 [官方文档]https://reacttraining.com/react-router/web/guides/quick-start ...

  5. React 组件通讯

    React   父→子组件通讯   在父组件中子组件上  绑定一个 变量名={要传递的数据}:走我们去子组件中接收....      直接用  this.props.刚刚起的变量名就ok了    上代 ...

  6. vue 组件通讯方式到底有多少种 ?

    前置 做大小 vue 项目都离不开组件通讯, 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是简单的例子. 如有错误欢迎指正. 温馨 ...

  7. React 世界的一等公民 - 组件

    猪齿鱼Choerodon平台使用 React 作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库Choerodon UI.结合实际业务情况,不断对组件优化设计,提高代码质量. ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. React之使用Context跨组件树传递数据

    ---------------------------------  讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...

随机推荐

  1. 基于Spring MVC + Spring + MyBatis的【银行账户信息管理系统】

    资源下载:https://download.csdn.net/download/weixin_44893902/45604661 练习点设计: 模糊查询.删除.新增.修改 一.语言和环境 实现语言:J ...

  2. Java基础周测一、二(50题)

    一.单选题 (共50题,250分) 1.下列选项不可作为Java语言变量名的是(    ). A. a1 B. $1 C. _1 D. 21 正确答案: D 2.有一段Java应用程序,它的类名是a1 ...

  3. Windows下安装配置ant

    1.ant安装 请从官网下载ant的*.zip格式的安装包, Windows建议下载*.zip版本, Linux建议下载*.gz版本. 2.配置环境变量 解压之后,在Windows中配置环境变量, 在 ...

  4. 带你认识FusionInsight Flink:既能批处理,又能流处理

    摘要:本文主要介绍了FusionInsight Flink组件的基本原理.Flink任务提交的常见问题.以及最佳实践FAQ. 本文分享自华为云社区<FusionInsight HD Flink组 ...

  5. 在B站学Java

    大家好,我是大彬~ 众所周知,B站是用来搞学习的,对于学编程的小伙伴来说,B站有着非常丰富的学习资源.今天给大家分享一些质量比较高的Java学习视频,希望对大家有帮助! Java基础 首先是Java基 ...

  6. MYSQL 自定义序列函数

    代码如下: DROP TABLE SEQNUM; -- 创建序列表 CREATE TABLE SEQNUM( ID BIGINT ); -- 插入初识值 insert INTO SEQNUM valu ...

  7. 初识python: 斐波拉契数(生成器获取)

    使用  生成器(yield) 获取斐波拉契数. 代码如下: def fun(n): a,b,c = 0,0,1 while a < n: yield b # b, c = c, b + c 以下 ...

  8. vue 从后台获取数据并渲染到页面

    一.在 created中调用methods中的方法 二.在methods中通过vuex异步获取后台数据 三.在computed 中计算属性 四.页面中调用computed中的计算后的属性 来自为知笔记 ...

  9. java POJO中 Integer 和 int 的不同,用int还是用Integer

    https://www.jianshu.com/p/ff535284916f [int和Integer的区别] int是java提供的8种原始类型之一,java为每个原始类型提供了封装类,Intege ...

  10. CentOS 7 把已登录的用户断开

    1. 查看登陆用户 [root@localhost ~]#  w 18:29:30 up 377 days, 8:44, 4 users, load average: 0.05, 0.12, 0.09 ...