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 ...
随机推荐
- Java基本数据类型转换二
public class TestConvert2 { /** * @param args */ public static void main(String[] args) { // TODO Au ...
- cookie:
Django Django处理一个请求的流程 在浏览器的地址栏中输入地址,回车,发了一个GET请求 wsgi模块接收了请求,将请求的相关信息封装成request对象 根据地址找到对应函数 执行函数获取 ...
- 剑指Offer-26.二叉搜索树与双向链表(C++/Java)
题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 分析: 创建两个指针,分别指向要处理的当前元素和当前元素的前一个元素.利用中 ...
- LG4051/BZOJ1031 「JSOI2007」字符加密 后缀数组
问题描述 BZOJ1031 LG4051 题解 发现这是一个环,根据经验,破环为链,于是字符环变为了字符串 之后对这个复制之后的字符串求后缀数组. $len$代表原字符串长度,代表复制后的字符串长度 ...
- vue中keepAlive的使用
在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态:vue里提供了keep-alive组件用来缓存状态.可以用以下几种方案 ...
- CSP-J&S2019第二轮游记认证
Day 0 我毕竟不是竞赛省,在黑龙江这个弱省任何初中都没有竞赛生的----在初中,文化课第一----永远如此. 因而,我并不能翘掉周五的文化课来复习或是提前前往省城参加下午2:00~6:00的试机. ...
- 基于Django的Rest Framework框架的认证组件
0|1一.认证组件的作用 在一个程序中有一些功能是需要登录才能使用的,原生Django中的auth组件可以用来解决这个认证问题,drf框架中也有对应的认证组件来解决这个问题. models.py ...
- Erlang基础2
1. apply apply(Mod, Func, [Arg1, Arg2, ..., ArgN]) 等价于 Mod:Func(Arg1, Arg2, ..., ArgN) 区别在于,使用apply, ...
- MongoDB自学------(2)创建删除数据库及集合
一.创建数据库 二.查看所有数据库 三.删除数据库 四.创建集合 五.删除集合 六.集合用法介绍 1.创建集合 2.删除集合 下一篇链接:https://www.cnblogs.com/LinHuCh ...
- Vue.js 源码分析(二十一) 指令篇 v-pre指令详解
该指令会跳过所在元素和它的子元素的编译过程,也就是把这个节点及其子节点当作一个静态节点来处理,例如: <!DOCTYPE html> <html lang="en" ...