首页 > 其他 > 详细

react 没有嵌套关系的组件通讯

时间:2020-04-20 14:28:00      阅读:80      评论:0      收藏:0      [点我收藏+]

前提准备四个文件,两个子组件: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 没有嵌套关系的组件通讯

原文:https://www.cnblogs.com/nimon-hugo/p/12736962.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!