React兄弟组件间的通信

前端-阿辉

已于 2022-09-14 10:24:34 修改

阅读量507

点赞数

CC 4.0 BY-SA版权

分类专栏： react.js 文章标签： react.js javascript 前端

于 2022-09-13 09:36:35 首次发布

本文链接：https://blog.csdn.net/bigpatten/article/details/126827222

react.js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在React应用中使用pubsub-js实现组件间的即时通信，包括安装插件、发布与订阅消息，以及组件间的交互示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 首先安装插件

npm install pubsub-js

2. 在使用的页面引入

import PubSub from ‘pubsub-js’

3. 发布消息PubSub.publish

PubSub.publish(‘消息名’, data)

4. 接受消息PubSub.subscribe

PubSub.subscribe(‘消息名’, (a, b) => {})

5. 取消发布订阅 PubSub.unsubscribe

PubSub.unsubscribe(this.token)

演示案例

Child组件内容

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

export default class Child extends Component {

  onPublish = () => {
    axios.get(`http://192.168.58.110:6666/user/list/id=${15895213568651}`).then(({ data: res }) => {
      // 发布消息
      PubSub.publish('list', { userList: res.data })
    }).catch((err) => {
      console.log(err)
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.onPublish}>点我发布消息</button>
      </div>
    )
  }
}

Child2组件内容

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

export default class Child2 extends Component {
  render() {
    // 初始化状态
    state = {
      userList: []
    }
    /**
     * 订阅消息，注意点：
     * 1. 订阅消息名必须和发布消息名相同
     * 2. 订阅消息第二个参数接受一个回调函数，必传两个形参
    */
    componentDidMount() {
      this.token = PubSub.subscribe('list', (_, data) => {
        // const { userList } = this.state
        this.setState({...data}) // 相当于 this.setState({userList: data})
      })
    }
    // 页面卸载时取消 消息订阅
    componentWillUnmount() {
      PubSub.unsubscribe(this.token)
    }

    return (
      const { userList } = this.state

      <div>
        { userList.map(item => {
          return (
            <div className="list">
              <div>{item.name}</div>
              <div className="list-desc">
                <div className="desc">{item.desc}</div>
                <div className="time">{item.time}</div>
              </div>
            </div>
          )
        }) }
      </div>
    )
  }
}