React中兄弟组件通信和组件跨级传递Context的使用
React兄弟组件之间的通信
Child2组件需要去更改Child1组件中的数据。
因为Child1和Child2是兄弟组件
所以数据和事件都放在最进的父级组件中去
兄弟组件通信的简单使用
import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class PartentHello extends React.Component {
state = {
num:10
}
// Child2中的组件事件的回调更改Child1中的数据
addHandler = () => {
this.setState({
num: this.state.num+10
})
}
render() {
return (
<div>
<Child1 num={ this.state.num}></Child1>
<Child2 addAdd={ this.addHandler}></Child2>
</div>
)
}
}
// 组件 Child1
const Child1 = props => {
return (
<h1>数量{props.num }</h1>
)
}
// 组件 Child2
const Child2 = props => {
return (
<button onClick={()=>props.addAdd()}>增加</button>
)
}
ReactDOM.render(<PartentHello></PartentHello>,document.getElementById('root'))
兄弟组件
将共享状态提升到最近的公共父组件中。
由公共父组件来管理这个状态(数据,事件)
它的思想就是状态提升
组件跨级传递 Context
当Child1组件中有Child2组件。
Child2组件中有Child3组件。
Child3中有Child4组件
我们怎么将Child1中的数据传递给Child4呢???
这个时候,我们就可以使用 Context.
他主要运用在数据跨组件传递。
如:背景颜色。 语言等
使用Context
import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
import './index.css'
// Provider是提供者, Consumer接受者
const { Provider, Consumer } = React.createContext()
class PartentHello extends React.Component {
render() {
return (
<Provider value='传递的数据'>
<div className='box'>
<Child1></Child1>
</div>
</Provider>
)
}
}
// 组件 Child1
const Child1 = () => {
return (
<div className='Child1'>
<h1> 我是Child1组件 </h1>
<Child2></Child2>
</div>
)
}
// 组件 Child2
const Child2 = () => {
return (
<div className='Child2'>
<h1> 我是Child2组件 </h1>
<Child3></Child3>
</div>
)
}
// 组件 Child3
const Child3 = () => {
return (
<div className='Child3'>
<h1> 我是Child3组件 </h1>
<Consumer>
{/* 千万要注意 Consumer不能有其他内容,否者会报错 */}
{data => <span>{data}</span>}
</Consumer>
</div>
)
}
ReactDOM.render(<PartentHello></PartentHello>,document.getElementById('root'))
总结 Context
使用Context的时候,他提供了两个组件。
分别是 Provider, Consumer。
Provider组件是提供数据的。Consumer是接受数据的。
Provider是使用value进行传递。
Consumer通过下面这样的方法进行接收数据
<Consumer>
{data => <span>{data}</span>}
</Consumer>
React中兄弟组件通信和组件跨级传递Context的使用的更多相关文章
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- $attrs/inheritAttrs可以实现组件的跨级传递
$attrs/inheritAttrs可以实现组件的跨级传递 // 问题1 为什么this.$attrs可以得到主 传递过来的值 //$attrs 说明 // ...
- 【Vue】计算属性 监听属性 组件通信 动态组件 插槽 vue-cli脚手架
目录 昨日回顾 1 计算属性 插值语法+函数 使用计算属性 计算属性重写过滤案例 2 监听属性 3 组件介绍和定义 组件之间数据隔离 4 组件通信 父子通信之父传子 父子通信之子传父 ref属性 扩展 ...
- React中兄弟组件传值
兄弟组件传值 实际上是间接的通过第三方来实现传值,举例,第一个儿子把值传给父亲,父亲在把这个值传给第二个儿子,这样就实现了兄弟组件传值 来看代码: 父组件代码 import React from 'r ...
- react 中的无状态函数式组件
无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...
- Vue 组件通信(组件间通信)
1.中央事件总线bus <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
- React中组件通信的几种方式
https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...
- react组件通信那些事儿
父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...
随机推荐
- 聊聊Hive数据血缘——从Atlas没有列级血缘的Bug讲起
前几天,Datahub提供了最新的字段级别数据血缘功能,很多朋友迫不及待想对比一下Datahub的字段级血缘与Atlas的区别. 这个时候问题来了,在Atlas收集Hive血缘的时候,由于部分版本问题 ...
- IOS证书制作教程
转载:IOS证书制作教程 点击苹果证书 按钮 编辑 点击新增 编辑 输入证书密码,名称 这个密码不是账号密码,而是一个保护证书的密码,是p12文件的密码,此密码设置后没有其他地方可以找到, ...
- Solon2 开发之IoC,六、提取 Bean 的函数进行定制开发
为什么需要提取Bean的函数?绝不是闲得淡疼.比如:控制器的@Mapping:再比如:Xxl-Job的@XxlJob.这些都是要提取Bean的函数并定制加工的. 1.比如提取 @XxlJob 注解的函 ...
- Docker 安装 kafka
简单安装为了集成 SpringBoot,真实使用,增加增加更多配置,比如将log映射出来 1.安装 zookeeper [root@centos-linux ~]# docker pull wurst ...
- You are not using binary logging
Error Code : 1381You are not using binary logging show variables like '%log_bin%'; 在mysqld配置项下面加上log ...
- Hugging News #0506: StarCoder, DeepFloyd/IF 好多新的重量级模型
每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...
- 别再问我 2050 可以干什么,Make a Movie in a Day!
2050 的每个年青人都是新物种.越是不可能见面的人见了面,就越会有奇迹发生,2050 努力让年青人见上另一位年青人,激发新的创造力.一起来 2050 看看? 2050 是什么? 2050 大会是由阿 ...
- 阿里云视频云「 vPaaS 」演绎了怎样的音视频应用开发「未来图景」?
vPaaS是阿里云视频云最新推出的低代码音视频应用开发产品,其中,vPaaS低代码音视频工厂,彻底打破了音视频应用的繁冗技术开发壁垒:vPaaS视频原生应用开发平台,全新定义了音视频应用的开发方式. ...
- 【ToolChains】CLion(VS2019) + CMake + Vcpkg 的使用
参考博客: https://blog.51cto.com/u_15075510/4201238 http://t.csdn.cn/pADDU https://zhuanlan.zhihu.com/p/ ...
- 二、swift添加存储策略
系列导航 一.swift对象存储环境搭建 二.swift添加存储策略 三.swift大对象--动态大对象 四.swift大对象--静态态大对象 五.java操作swift对象存储(官网样例) 六.ja ...