react学习——21react中消息的订阅与发布

最新推荐文章于 2025-06-15 11:13:50 发布

一叶飘零晋

最新推荐文章于 2025-06-15 11:13:50 发布

阅读量324

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/ChenJin_2/article/details/140117838

1、安装 pubsub-js

npm install pubsub-js

2、消息发布

PubSub.publish('update-list',{
   
   isLoding:false,users:res.data.items});

3、消息订阅


```javascript
componentDidMount() {
   
   
        //订阅消息
        PubSub.subscribe('update-list',(msg,keyword)=>{
   
   
            this.setState(keyword)
    })

4、完整代码
App.js

```javascript
//创建“外壳”组件APP
import React, {Component} from "react";
//引入Search组件
import Search from "./components/Search";
//引入List组件
import List from "./components/List";
//创建并暴露App组件
export default class App extends Component {


    render() {
        return (
            <div className="container">
                <Search ></Search>
                <List></List>
            </div>
        )
    }
}

List组件

import React, {
   
   Component} from "react";
import PubSub from 'pubsub-js'
//引入样式
import "./index.css";
export default class List extends Component {
   
   
    state={
   
   
        users:[],
        isFirst:true,//是否第一次加载数据
        isLoding:false,//是否正在加载数据
        err:''