react中同级组件之间使用消息订阅与发布实现同级组件之间的数据交互，pubsub-js的使用

安装 pubsub-js

npm install pubsub-js --save

使用

例如：我们创建一个Header组件与List组件，这两个组件是同级的

App.js

import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import './App.css'
export default class App extends Component {

  render() {
    return (
      <div>
        <p className="title">App</p>
        <div className="box">
          <Header />
          <List />
        </div>
      </div>
    )
  }
}

Header/index.jsx

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import Style from './index.module.css';
export default class Header extends Component {

    sendMsg = ()=>{
        //发布消息，listMsg
        PubSub.publish('listMsg','我是Header组件传给List组件的值');
    }

    render() {
        return (
            <div className={Style.header}>
                header
                <button onClick={this.sendMsg} className={Style.btn}>给List组件传参</button>
            </div>
        )
    }
}

List/index.jsx

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

export default class List extends Component {

    state = {msg:''};
    componentDidMount(){
        //订阅消息，listMsg
        PubSub.subscribe('listMsg',(name,msg)=>{
            console.log(name);
            this.setState({
                msg:msg
            })
        })
    }
    render() {
        let {msg} = this.state;
        return (
            <div className={Style.list}>
                <p className={Style.title}>List</p>
                <p className={Style.message}>{msg}</p>
            </div>
        )
    }
}

在需要传递参数的组件进行消息发布

使用publish方法发布消息 第一个参数为消息名称，第二个参数为消息内容

//发布消息，listMsg
PubSub.publish('listMsg','我是Header组件传给List组件的值');

在需要接收消息的组件进行消息订阅

使用 subscribe 方法进行消息订阅，第一个参数为消息名称，第二个参数为function，function内接收两个参数，第一个为消息名称，第二个为消息内容

//订阅消息，listMsg
PubSub.subscribe('listMsg',(name,msg)=>{
    console.log(name);
    this.setState({
        msg:msg
    })
})

如图 Header组件与List组件为同级组件 Header组件内有一个按钮去发布消息，给List组件传参

点击按钮

List组件接收到了Header组件发布的消息并显示出了Header组件传过来的消息