React 借助pubsub-js进行兄弟组件的传递值

1===》 raect中两个 兄弟组件  互相通信使用的技术
使用 消息订阅(subscribe)和发布(publish)机制   s儿 伯 s rai b   pʌ b lɪ ʃ
复制代码
有一个库可以处理
PubSubJS  它是第三方插件  
1)下载 cnpm install pubsub-js -S    我的版本  "pubsub-js": "^1.7.0",
2) 在需要使用的组件中引入    import PubSub from "pubsub-js" 
  // id 声明一个唯一的id,或者标识符,为pubsub-js提供辨识,千万不可重复
  // data 第二个参数也可以传递一个对象  它表示传递的内容
   PubSub.publish(id, data)   开始发布

   PubSub.subscribe(id, callback(message, data){}) 订阅

 
复制代码

 

Numbergo1 .js兄弟组件  可以向Numbergo2 .js组件传递值
复制代码
import React, { Component } from "react"
import PubSub from "pubsub-js"

export default class Numbergo1 extends Component {
    // 发送消息:PubSub.publish(名称, 参数)

    state={
        listitem:"我是从一个组件的 跑过来的"
    }
    
    chuandi=()=>{
        // PubSub.publish(id, data)  
        // id 声明一个唯一的id,或者标识符,为pubsub-js提供辨识,千万不可重复
        // data 第二个参数也可以传递一个对象
        let {listitem}=this.state //结果
        PubSub.publish('mykeyvalue',listitem)
 
    }


    render() {
        return (
            <div>
                <button onClick={this.chuandi}>按钮</button>
            </div>
           
        )
    }
}
复制代码

 

Numbergo2.js
复制代码
import React, { Component } from "react"
import PubSub from "pubsub-js"


export default class Numbergo2 extends Component {
    // 发送消息:PubSub.publish(名称, 参数)
    
    state={
        info:""
    }


    // 声明周期 组件完成挂载之后
    componentDidMount(){
        // mykeyvalue表示符  msg报错信息  data传递过来的数据
        PubSub.subscribe("mykeyvalue",(msg,data)=>{
            console.log("从另外一个组件从低过来的数据",data);
            this.setState({
                info: data
            })
        })
    }

   
    render() {
        // render使用state中的数据 必须要先解构构
        let {info}=this.state
        return (
            <div>
                ----{info}
            </div>

        )
    }
}
复制代码

 

 

posted @   南风晚来晚相识  阅读(1227)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)
点击右上角即可分享
微信分享提示