1.通过父组件当中间人方式,子传父再传子

2.通过发布订阅模式

obj={
list:[],
sub(callback){
list.push(callback)
},
pub(){
list.foreach((callback)=>{
callback() })
}
} obj.sub(()=>{
console.log(''') }) obj.pub()

先发布后订阅

3.context通讯

父组件通过包裹

ThemeContext= react.createContext()

<ThemeContext.Provider value={{

theme: themes[themeIndex],

changeTheme: this.changeTheme

}}>

子组件

<ThemeContext.Consumer>

{({theme, changeTheme}) => <button onClick={changeTheme} style={{background: theme.background, color: theme.color}}> It's a button. }

</ThemeContext.Consumer>

react 非父子组件传参方式的更多相关文章

  1. React(7) --react父子组件传参

    react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React f ...

  2. Angular 项目开发中父子组件传参

    在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...

  3. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  4. vue 监听父子组件传参,对象数据变化

    watch:{ 组件传参的字段 :{ handler (newV, oldV){ 这里打印 newV, oldV 就可以看到数据变化了 } , immediate: true, // 重点 deep: ...

  5. vue 动态组件、父子组件传参

    1.vue中的自定义属性并获得属性的值 自定义属性::data-id语法为 :data-属性  获取属性的值:ev.target.dataset.id 2.vue父子组件传值 3.动态组件使用

  6. vue指令,实例成员,父子组件传参

    v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...

  7. React编写input组件传参共用onChange

    之前写页面上的input比较少,所以没有单提出来一个组件,今天研究了下input组件,但共用一个onChange的问题卡了一会儿,查了下发现几个比较好的方法,分享下: 方法一 Input组件 let ...

  8. Vue父子组件传参新写法

    以前我在写接受自定义事件是这么写的: 后来我在官网看到这样一种说法:可以用$event代替emit事件传入的参数,于是我写成了这样: 直到昨天Vetur更新,给我报了这么一个错误: 报错原因:事件不能 ...

  9. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  10. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

随机推荐

  1. python批量将png图片转换为jpg图片

    参考引用链接如下:https://www.freesion.com/article/1866518882

  2. JavaScript 数字与字符串的加减乘除运算

    点击跳转 Tips: 除开字符串 + 数字的运算,会产生级联,其他情况下会将 String 转为 number 再进行数字运算. js 运算是从左到右的,所以一步一步来,不要跳步进行运算.

  3. springboot+Elasticsearch 复杂查询

    以前没做过ES 里面的查询,第一次接触还是走了点弯路的. 就是这个字段你在ES 都不用模糊查的话,就可以设置 type = FieldType.Keyword,比如ID之类的. 一:建ES存储的实体 ...

  4. slitaz5安装vim,sakura终端命令行打不开

    刚开始安装了vim后,vim提示libtinof.so.6打不开.在网上查,发现可能是库缺少.然后查看了依赖库文件 ldd /usr/bin/vim 发现果然缺少了 libncurses.so.6 的 ...

  5. 移动web_平面转换

    平面转换 平面 平移 旋转 缩放 概念:使用transform属性实现元素的位移.旋转.缩放等效果 注意点:行内元素所有的平面转换是没有效果的 平面: 平面转换的平面指的是二维平面(2D)只有X和Y轴 ...

  6. IEEE 802.66( WiMax)的衰亡

    1.什么是WiMax WiMAX全称为,World Interoperability for Microwave Access,即全球微波接入互操作性,是一项基于IEEE 802.16标准的宽带无线接 ...

  7. ctfshow web入门 命令执行 37-39

    37-39 基于 GET 传参的 include() 38.39 是 37 的变种 分析 伪协议常用于文件包含漏洞中 文件包含函数有:include.include_once.require.requ ...

  8. GIS空间分析和建模复习重点4

    27.三维地形分析的方法 常用的有 ·坡度分析 ·坡向分布 ·填挖方分析 ·山体阴影分析 ·通视分析 28.空间分析实际应用 (1)城市应急避难场所是城市防灾减灾规划的重要组成部分,应急避难场所的建设 ...

  9. Visio中的图无失真导入LaTeX中

    参考网址: LaTeX导入图片不失帧的方法_奋斗的西瓜瓜的博客-CSDN博客_latex图片模糊 LaTeX中插入eps格式图片_不觉岁华成暗度的博客-CSDN博客_eps latex Visio图片 ...

  10. centos7.8 安装 redis5.0.2

    1.安装gcc依赖 redis是由C语言开发,因此安装之前必须要确保服务器已经安装了gcc,可以通过如下命令查看机器是否安装: gcc -v 如果没有安装则通过以下命令安装: yum install ...