react中发布订阅（pubsub-js）的用法（兄弟之间传值）

最新推荐文章于 2024-09-12 10:50:14 发布

呵呵呵★

最新推荐文章于 2024-09-12 10:50:14 发布

阅读量983

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46325878/article/details/125808826

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了在React应用中如何使用发布订阅模式（pubsub-js库）来解决兄弟组件间复杂的数据交互问题。通过发布者发布数据，订阅者接收并更新状态，实现了非父子组件间的通信。示例代码包括发布者组件（SelectData）的输入提交功能，以及订阅者组件（GoodList）的页面数据获取和渲染。

摘要由CSDN通过智能技术生成

发布订阅主要用来解决复杂的层集之间的数据交互，比如兄弟之间的复杂传值，这种情况就不适合使用props和context来进行传值。

1.在使用发布订阅前需要安装pubsub-js包

npm install pubsub-js

2.发布者主要代码

import React, { Component } from 'react'
// 导入发布订阅包
import PubSub from 'pubsub-js'
import './SelectData.css'
export default class SelectData extends Component {
    
    unpage=React.createRef()
    selePage=()=>{
        // 接收用户输入数据
        let page=this.unpage.current.value
        // 调用pubsub提供的方法publish(发布者利用接收到的数据传给订阅者page)（pageNumber为发布的函数名，相当于标识身份用的）
        PubSub.publish('pageNumber',page)
        // 提交后全选
        this.unpage.current.select()
    }
    render() {
        return (
            <div className='select'>
                <input type='text' ref={this.unpage} />
                <button onClick={this.selePage}>提交</button>
            </div>
        )
    }
}

3.订阅者部分代码

import React, { Component } from 'react'
import './GoodList.css'
//导入发布订阅包
import PubSub from 'pubsub-js'
// 导入axios请求包
import axios from 'axios'
export default class GoodList extends Component {
  state = {
    // 初始值
    page: 1,
    goods: []
  }
  // 初始化加载
  componentDidMount() {
    // 初始化调用
    this.getData()
    // 订阅者接收发布者提供的数据data（pageNumber为发布的函数名，相当于标识身份用的）
    PubSub.subscribe('pageNumber', (msg, data) => {
      console.log(msg, data);
      // 使用setState修改
      this.setState({
        page: data
      }, () => {
        // 延时调用
        this.getData()
      })
    })
  }
  // axios请求封装
  getData = () => {
    axios.get(`https://api.shop.eduwork.cn/api/index?page=${this.state.page}`)
      .then(res => {
        console.log(res);
        if (res.status === 200) {
          // 修改goods值
          this.setState({
            goods: res.data.goods.data
          })
        }
      })
  }
  render() {
    // 解构
    let { goods } = this.state
    console.log(goods);
    return (
      <div className='goods'>
        <ul>
          {/* 遍历取值 */}
          {goods.map(ele =>
            <li key={ele.id}>
              <img src={ele.cover_url} alt="" />
              <p>{ele.title}</p>
              <p className='bookText'>
                <span>￥{ele.price}</span><span>⭐{ele.stock}</span>
              </p>
            </li>
          )}
        </ul>
      </div>
    )
  }
}