标签：event hang str app nbsp change turn img bind
前提准备四个文件，两个子组件：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>
效果图：
标签：event hang str app nbsp change turn img bind
原文地址：https://www.cnblogs.com/nimon-hugo/p/12736962.html
