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

Posted 2021-02-28 nimon-hugo

前提准备四个文件，两个子组件：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>

效果图：