前提准备四个文件,两个子组件: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 Boot 整合 阿里开源中间件 Canal 实现数据增量同步!

    大家好,我是不才陈某~ 数据同步一直是一个令人头疼的问题.在业务量小,场景不多,数据量不大的情况下我们可能会选择在项目中直接写一些定时任务手动处理数据,例如从多个表将数据查出来,再汇总处理,再插入到相 ...

  2. Windows11实现录屏直播,H5页面直播 HLS ,不依赖Flash

    这两天的一个小需求,需要实现桌面实时直播,前面讲了两种方式: 1.Windows 11实现录屏直播,搭建Nginx的rtmp服务 的方式需要依赖与Flash插件,使用场景有限 2.Windows 11 ...

  3. Tomcat 组成与工作原理

    开源的 Java Web 应用服务器,实现了 Java EE(Java Platform Enterprise Edition)的部分技术规范,比如 Java Servlet.Java Server ...

  4. 【python】PyQt5 QAction 添加点击事件

    def test(): #your function ui.yourQActionName.triggered.connect(lambda:test()) #添加lambda: 就不报错了

  5. Counterfactual VQA: A Cause-Effect Look at Language Bias

    目录 概 主要内容 实现 代码 Niu Y., Tang K., Zhang H., Lu Z., Hua X. and Wen J. Counterfactual VQA: A Cause-Effe ...

  6. 想看Vue文档,cn放错位置,误入xx网站...

    昨晚,DD在微信群(点击加入)里看到有小伙伴说,想去Vue官网看中文文档,不当心把cn写错了位置,结果进入了xx网站... 老司机们应该都知道,Vue官网的中文文档地址是:https://cn.vue ...

  7. zbar解析二维码demo

    开发环境;ubuntu 18.04 IDE:clion 2019 源文件.cpp #include <opencv2/opencv.hpp> #include <zbar.h> ...

  8. 万能密码:‘or 1=1-- 实战SQL注入,秒破后台

    主要是没有对登录密码的字符串进行参数化和过滤,所以导致网站可以直接用"万能密码"进行突破登录 仅供学习交流 这是某同学做的网站,今天无聊打开了,并帮他进行测试一下 看到这个后台,感 ...

  9. 第三代微服务架构:基于 Go 的博客微服务实战案例,支持分布式事务

    这是一个可一键部署在 Kubernetes-Istio 集群中的,基于 Golang 的博客微服务 Demo,支持分布式事务. 项目地址:https://github.com/jxlwqq/blog- ...

  10. 利用pyinstaller给工程打包生成python可执行文件

    step1.下载pyinstaller: step2.将pyinstaller的路径加入系统环境变量PATH中:(关键) step3.进入工程的根目录下(即可执行文件.py)所在目录下,cmd,输入命 ...