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"
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>
)
}
}

React 借助pubsub-js进行兄弟组件的传递值的更多相关文章
- Vue 兄弟组件之间传递数值
Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...
- vue2.0 兄弟组件数据传递方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 从一个函数中传递值到另一个函数
一个函数的调用大家都会用 我今天在调接口的时候突然发现需要引用个另一个函数中拿到的值 举个栗子 刚开始 我是这样调用的 alert弹出的是 hello world . 但是我a函数内部还有一个函数 画 ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- vue.js 兄弟组件传值
另: 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...
- 【react】兄弟组件的通信方式,传统非redux
很多用过redux开发的朋友们都知道,一般兄弟组件通信可以使用redux. redux也是近期在挤时间学习中.可能也不是很懂,说不定是有错误的理解,若有.现在虽然自己搭建了一个react+router ...
随机推荐
- linux学习(三)系统目录结构
登录系统后,在当前命令窗口下输入命令: ls / 你会看到如下图所示: 树状目录结构: 以下是对这些目录的解释: /bin:bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boot: ...
- Pwnable-collision
一样的连接ssh,输入密码,查看文件 看看col.c的源码 #include <stdio.h> #include <string.h> unsigned long hashc ...
- SqlServer断开所有连接
有时候我们在使用SqlServer管理工具操作数据库的时候,需要对数据库进行改名,但是如果当前数据库还有连接未释放的话,是不能改名的. 有很多方式可以断开所有连接,这里介绍一种个人觉得比较简单的方式. ...
- Winform重写键盘按键事件
/// <summary> /// 重写键盘处理事件,处理退出和回车按钮 /// </summary> protected override bool ProcessCmdKe ...
- 补充: canal
1. 作用: 同步mysql:做拉链表:更新redis 某些情况无法从日志中获取信息,而又无法利用sqoop等ETL工具对数据实时的监控 2. canal的工作原理: ...
- 【CF464E】The Classic Problem(主席树+最短路)
点此看题面 大致题意: 给你一张无向图,每条边的边权为\(2^{x_i}\),求\(s\)到\(t\)的最短路. 最短路 最短路,首先考虑\(Dijkstra\).这里用\(SPFA\)似乎不太好,因 ...
- 洛谷P4173 残缺的字符串
题目大意: 两个带通配符的字符串\(a,b\),求\(a\)在\(b\)中出现的位置 字符串长度\(\le 300000\) 考虑魔改一发\(kmp\),发现魔改不出来 于是考虑上网搜题解 然后考虑\ ...
- SUDO_KILLER可以帮助你识别并利用错误的Sudo规则与配置
工具概述 SUDO_KILLER这款工具可以帮助我们通过多种渠道利用SUDO来在Linux环境下实现提权.该工具能够识别目标操作系统版本,并发现环境中sudo规则的错误配置.安全漏洞,以及不安全的代码 ...
- 详解 IaaS、PaaS和SaaS 以及他们各自的代表公司
——IaaS,PaaS和SaaS 是云计算领域的专业术语,也是云计算的三种服务模式. (1)SaaS:Software as a Service,软件即服务(也称为云应用程序服务) . 云市场中企 ...
- 明解C语言 中级篇 第一章答案
练习1-1 #include <stdio.h> #include<stdlib.h> int main() { srand(time()); ; printf("您 ...