react.js中模擬事件總線

1、bus.js

import { EventEmitter } from 'events';
export default new EventEmitter();

2、組件A

import React from 'react'
import bus from '../bus' //引入中間量bus,註冊事件，被控組件
class A extends React.Component{
   constructor(props){
       super(props)
       this.state={
           count:1
       }
   }
   //在掛載之前註冊事件，bus綁定add事件
   componentWillMount(){
       bus.on('add',()=>{
           this.setState({ count: this.state.count+1 })
       })
   }
    render(){
        return (
            <div>
                <p>這是A組件</p>
                <p>count:{this.state.count}</p>
            </div>
        )
    }
}
export default A

3、組件B

import React from 'react'
import bus from '../bus' 
class B extends React.Component{
   constructor(props){
       super(props)
   }
   
   add = () => {
   			bus.emit('add',()=>{})
   }
    render(){
        return (
            <div>
                <p>這是B組件</p>
                <button onClick={this.add}>+1</button>
            </div>
        )
    }
}
export default B