React组件通信之发布订阅基本使用(同级，多级组件传参解决方案)

下载pubsub-js

npm install pubsub-js
//之后按需引入

订阅与发布

//例Text和Top为同级组件,并已引入PubSub
//Text组件
class Text extends React.Component {
  state = {
    num: 20
  }
  componentDidMount() {
    //发布
    const { num } = this.state
    PubSub.publish('search', num)//第一个参数消息名,第二个参数要传递的参数
  }
  render() {
    return <div>
      <h2>text</h2>
    </div>
  }
}
export default Text
//Top组件
class Top extends React.Component {
  componentDidMount() {
    //订阅
    PubSub.subscribe("search", (msg, data) => {//msg消息名,data接收传递过来的参数
      console.log(msg, data);
    })
  }
  render() {
    return <div>
      <h2>top</h2>
    </div>
  }
}
export default Top