React全局事件传递之events简单案例

在react中如果有不同的组件需要有事件传递的话，就可以用到这个events

第一步就是安装这个events了

yarn add events

下面这个案例主要是在Profile组件里面，点击button通过events发送一个事件，然后在Home组件里面进行接收

import React, { PureComponent } from 'react' import {EventEmitter} from 'events' const eventBus = new EventEmitter() class Home extends PureComponent{ componentDidMount(){ //进行事件监听 eventBus.addListener("sayHello",this.handleSayHelloListener) } componentWillMount(){ //取消事件监听 eventBus.removeListener("sayHello",this.handleSayHelloListener) } handleSayHelloListener(message,num){ console.log(message,num) } render(){ return ( <div> Home </div> ) } } class Profile extends PureComponent{ render(){ return ( <div> Profile <button onClick={e=>this.emmitEvent()}>点击了profile</button> </div> ) } emmitEvent(){ eventBus.emit("sayHello","Hello Home",123) } } export default class App extends PureComponent { render() { return ( <div> <Home/> <Profile/> </div> ) } }

如图，效果如上