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. AgilePoin规则执行

    我在写窗体规则时,明明默认值已经绑定,但是在页面加载时规则并没有起作用,导致改隐藏的没隐藏,该显示的不显示.找了半天,发现规则设置时可选择执行事件. 设置在页面加载时执行规则后,发现还是不能正确显隐组 ...

  2. flask-基础篇03 请求钩子与上下文

    一.异常处理 1.HTTP 异常主动抛出 ①abort 方法: 抛出一个给定状态代码的 HTTPException 或者 指定响应,例如想要用一个页面未找到页面未找到异常来终止请求,你可以调用 abo ...

  3. springboot上传图片

    springboot上传图片 新建一个springboot项目: 在java/main/com/ljx 创建一个controller.fileController类 内容如下: package com ...

  4. The emulator process for AVD Pixel_4_XL_API_30 was killed 问题

    转载请注明来源:https://www.cnblogs.com/Sherlock-L/p/14946317.html 问题: 因为工作关系接触到了Android Studio,新建了4和11系统的模拟 ...

  5. nodejs,阿里云手机号一键登录

    const Core = require('@alicloud/pop-core'); const accessKeyId = "xxxx" const accessSecret ...

  6. Hadoop完全分布式开发配置流程

    完全分布式开发 整体流程 1.准备3台纯净虚拟机 2.修改每台ip,主机名,主机映射,关闭防火墙 3.安装jdk和hadoop,配置环境变量 4.集群分发脚本编写 5.集群配置 6.ssh免密登录 7 ...

  7. postgresql添加系统表报错

    1.添加系统表后,执行make install报如下错误,未自动生成下面两个文件cp: cannot stat './catalog/ux_user_status_d_compatible.h': N ...

  8. 1067- invalid default value for ""

    创建表时报的,一个时间字段类型是datetime,一保存就报错,网上说是datetime类型只支持mysql 5.6.5+,我看了下我的版本,5.8的,没什么问题,然后找了许久找到了错误的地方. 很蠢 ...

  9. Android Studio相关配置说明

    介绍:Android Sdutio 是谷歌推出的一个 Android 集成开发工具. 现已将 SDK(software development kit)集成到 Android Studio 中.可以直 ...

  10. 【文献阅读】An efficient motion planning based on grid map: Predicted Trajectory Approach with global path guiding

    (1)主要工作内容 本文提出了一种基于轨迹预测法的欠驱动无人艇的全局运动规划算法.该方法考虑了无人艇的所有动力学约束,并且能找到一条根据船舶自身操纵系统进行跟踪的全局轨迹. 根据USV数学模型生成的预 ...