react 任意组件组件通讯包 pubsub-js

在 react 中，组件机之间的通信包括父向子、子向父、兄弟间，父向子通过 props 传递数据。子向父通过 props 传递一个事件，在合适的时机调用。兄弟之间通信可以借助共同的父组件，传递方把数据传给父组件，然后父组件再把数据传给接收方，这样操作起来就会比较繁琐。所以可以借助第三方包来进行兄弟组件之间的通信。

pubsub-js 包

GitHub 官网：https://github.com/mroderick/PubSubJS#readme
npm 官网：https://www.npmjs.com/package/pubsub-js

下载

npm install pubsub-js

使用

import PubSub from 'pubsub-js';

PubSub.publish('消息标识', 消息内容) // 发布消息
var token = PubSub.subscribe('消息标识', (msg, data) => {}) // 订阅消息，回调里面的参数，msg 是消息标识，data 是消息内容
PubSub.unsubscribe(token) // 取消订阅
...

---

例子：
传输方

import React,{Component} from 'react'
import './index.css'
import PubSub from 'pubsub-js'

class Demo1 extends Component {
  state = {
    msg: 'hello, react'
  }
  handlerClick = () => {
    PubSub.publish('message', this.state.msg)
  }
  render() {
    return (
      <div className="demo1">
        <h2>我是 demo1 组件</h2>
        <button onClick={this.handlerClick}>给Demo2组件传数据</button>
      </div>
    )
  }
}

export default Demo1

接收方

import React,{Component} from 'react'
import './index.css'
import PubSub from 'pubsub-js'

class Demo2 extends Component {
  state = {
    msg: ''
  }
  componentDidMount() {
    this.token = PubSub.subscribe('message', (_, data) => {
      console.log(data);
      this.setState({
        msg: data
      })
    })
  }
  // 组件销毁之前，关闭订阅消息，否则会报错
  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }
  render() {
    return (
      <div className="demo2">
        <h2>我是 demo2 组件</h2>
        <span>{this.state.msg}</span>
      </div>
    )
  }
}

export default Demo2

两个组件需要在 App.js 中挂载即可