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

原创已于 2022-01-29 17:08:49 修改 · 815 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-01-07 18:00:16 首次发布

React.js 专栏收录该内容

35 篇文章

订阅专栏

这篇博客介绍了如何在React应用中使用pubsub-js库实现兄弟组件之间的通信。首先，在VSCode中通过yarn安装pubsub-js，然后在组件中引用并分别进行订阅和发布操作。在App.jsx中，PageA组件订阅'getData'消息，当PageB组件的按钮被点击时，发布'getData'消息，传递数据到PageA，更新其状态显示。这种方法提供了一种解耦的方式来处理组件间的通信。

在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>
    )
  }
}