React.js兄弟组件的传值通信

在React中，完成兄弟组件之间的通信，要借助pubsub-js库

在vs code中，借助yarn进行下载安装

yarn add pubsub-js

在组件中通过以下语句进行引用

import PubSub from 'pubsub-js'

订阅消息用法

PubSub.subscribe('getData',(msg,stateObj)=>{
      console.log('A组件订阅消息了')
      console.log(stateObj)
      this.setState(stateObj)
    })

发布消息用法

PubSub.publish('getData',{name: 'chen',age: 23})

App.jsx

import React, { Component } from 'react'

// 组件引用
import PageA from './components/pageA'
import PageB from './components/pageB'

export default class App extends Component {

  render() {
    return (
      <div>
        <PageA/>
        <PageB/>
      </div>
    )
  }
}

PageA.jsx

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class PageA extends Component {

  state = {
    name: '',
    age: ''
  }

  componentDidMount(){
    PubSub.subscribe('getData',(msg,stateObj)=>{
      console.log('A组件订阅消息了')
      console.log(stateObj)
      this.setState(stateObj)
    })
  }
  render() {
    return (
      <div>
        <h2>我是pageA组件</h2>
        <div>以下是组件B发送的数据</div>
        <div>
          <p>name: {this.state.name}</p>
          <p>age: {this.state.age}</p>
        </div>
      </div>
    )
  }
}

PageB.jsx

import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class PageB extends Component {

  sendData = ()=>{
    console.log('B组件发送消息了')
    PubSub.publish('getData',{name: 'chen',age: 23})
  }

  render() {
    return (
      <div>
        <h2>我是pageB组件</h2>
        <button onClick={this.sendData}>点击我发送数据到组件A</button>
      </div>
    )
  }
}

点击按钮后的效果：