React Emitter 的使用

[SevenChan07]

在React中使用Emitter方法也可以实现组件间的通信功能。

[SevenChan07]

使用fbemitter

[SevenChan07]

改写上一个issue，实现同样的组件间通信方法。
hello.js

import React from 'react'
import {ThemeContext} from './context'
import ComponentA from './componenta'
import Event from 'fbemitter'

window.emitter = new Event.EventEmitter()

export default class Hello extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      color: 'red',
    }
  }

  componentDidMount() {
    this.token = emitter.addListener('change', e => {
      this.setState({ color: e })
    })
  }

  componentWillUnmount() {
    this.token.remove()
  }

  render() {
    const {state} = this.state

    return (
      <div>
        `this is ${color}`
        <div>
          <ComponentA />
        </div>
      </div>
    )
  }
}

componenta.js

import React from 'react'

export default class ComponentA extends React.Component {
  handleKeyDown() {
  }

  changeColor() {
    emitter.emit('change', 'blue')
  }

  render() {
    return (
      <div className="component-a">
        <div
          role="button"
          tabIndex="0"
          onClick={() => this.changeColor()}
          onKeyDown={this.handleKeyDown}
        >
          component-a
        </div>
      </div>
    )
  }
}