Skip to content

React组件间传参

pubsub-js(发布订阅)

npm install pubsub-js

使用

组件A订阅消息
js
import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./index.css";
export default class List extends Component {
  state = {
    users: [],
    isFirst: true,
    isLoading: false,
    err: "",
  };

  componentDidMount(){//初始时订阅消息
    this.token=PubSub.subscribe('updateList',(_,updateObj)=>{
      console.log(updateObj)
      this.setState(updateObj)
    })
  }

  componentWillUnmount(){//组件销毁时取消订阅
    PubSub.unsubscribe(this.token)
  }
    
}
组件B发布消息
js
import PubSub from "pubsub-js";

PubSub.publish("updateList", { isFirst: false, isLoading: true });//发布消息