React组件实现越级传递属性
如果有这样一个结构:三级嵌套,分别是:一级父组件、二级子组件、三级孙子组件,且前者包含后者,结构如图:
如果把一个属性,比如color,从一级传递给三级,一般做法是使用props逐一向下传递,代码如下:
// 一级父组件
class Level1 extends React.Component{
render(){
return <Level2 color='red'/>
}
}
// 二级子组件
class Level2 extends React.Component{
render(){
return <Level3 color={this.props.color}/>
}
}
// 三级孙子组件
class Level3 extends React.Component{
render(){
return <div color={{color: this.props.color}}/>
}
}
看代码会发现,level2根本没有用到color,但是为了在level3中使用,它还是不得不写上color={this.props.color}。一是代码冗余,二是如果后期把color改成txt或者增加一个属性,改起来复杂。那么如何把color直接从level1给level3呢?答案是:使用伟大的Context实现越级传递。
直接上代码:
// 一级父组件
class Level1 extends React.Component{
// ****第2步:给子类共用属性赋值****
getChildContext() {
return {color: "red"};
}
render(){
return <Level2/>
}
}
// ****第1步:定义子类们共用的属性及类型****
Level1.childContextTypes = {
color: React.PropTypes.string
};
// 二级子组件
class Level2 extends React.Component{
render(){
return <Level3/>
}
}
// 三级孙子组件
class Level3 extends React.Component{
render(){
return <div color={{color: this.context.color}}/> // ****第4步:使用this.context接受越级传递的参数****
}
}
// ****第3步:定义子组件从组件需要接受的属性和类型****
Level3.contextTypes = {
color: React.PropTypes.string
};
每一步的说明,也都在备注里了,这里就不再一一解读了。
另外,在React Redux中,Provider组件通过context方式把store传递给所有容器和子组件的方式,底层也是利用了这个原理。
更多专业前端知识,请上 【猿2048】www.mk2048.com
React组件实现越级传递属性相关推荐
- 小程序自定义组件方法以及传递属性
自定义组件创建方法 1.在根目录下创建components文件夹.(第一次的时候创建,以后就不需要再创建了) 2.在components下面创新组件名,如xsj,继续在xsj文件夹下单击右键,新建co ...
- React组件常用设计模式之Render Props
自己在总结最近半年的React开发最佳实践时,提到了Render Props,想好好写写,但感觉篇幅又太长,所以就有了此文.愿你看完,能有所收获,如果有什么不足或错误之处还请指正.文中所提到的所有代码 ...
- react组件之间传递信息/react组件之间值的传递
react组件之间传递信息/react组件之间值的传递 首先咱们先来了解一下,数据是怎么进行相互间传递的; api和组件的区别:一个是逻辑层的方法函数,一个是表现层的组件(方法函数). api是一组预 ...
- React 组件之间传递参数
其实react组件之间传递参数是比较简单的,但是没有具体的使用过,组件之间传递参数是比较常见的事情,所以记录一下,防止以后自己在网上胡乱的翻找 最近做了一个商品的列表页面,我想通过点击修改能够实现商品 ...
- 学习React第三篇:在React组件上设置属性(PropTypes)
继编写 使用组件的render方法在React中显示输出 接下来,在React组件上设置属性: 那我们如何在React中传递数据的方式. 我们将了解一下React中的propTypes和default ...
- react 组件的属性
react组件的属性值如果不是字符串的话,要用大括号括起来.比如 <InputText name='sisi' age={6} school='hust' />, 如果写作age=6的话, ...
- [react] 怎样将事件传递给子组件?
[react] 怎样将事件传递给子组件? 这道题出的有问题. 一般情况下我们父组件向子组件传递的不是事件,而是事件处理函数 const Parent = ({ lastName }) => {o ...
- vue3组件之间通信(三)——爷孙组件传递属性和方法
文章目录 1:setup函数传递属性和方法($attrs) 1:代码 2:主要代码和详细讲解 3:注意点 2:script setup 语法糖传递属性和方法 1:代码 2:主要代码和详细讲解 3:注意 ...
- React - 一般组件 withRouter 的使用(让一般组件具备路由组件特有的API属性)
React - 一般组件 withRouter 的使用(让一般组件具备路由组件特有的API属性) 一. withRouter 理解 二. withRouter 使用 一. withRouter 理解 ...
最新文章
- ubuntu修改根用户密码
- 内部排序——直接插入排序
- node中使用es6/7/8 --- 支持性与性能
- 从央视到谷歌:聊一聊竞价广告的机制设计
- Java NIO框架Mina
- Linux基础学习十:Linux的权限管理
- 也乱弹Book.Save而引OO对话
- NetBeans在Apache基金会取得的进展
- chrome 内核CEF 编译和qt 封装(上)
- Kafka报错: Topic(s) [publish] is/are not present and missingTopicsFatal is true
- 《麻省理工学院公开课:人工智能》笔记一
- linux中双方同步unison服务器搭建
- antd输入框禁止回车
- 思科tar格式IOS升级方法
- 面试官:说一下公平锁和非公平锁的区别?
- EU.org免费域名申请教程
- Ubuntu系统的内核架构介绍
- Android刘海屏、水滴屏全面屏适配方案
- 联想拯救者15isk-i5版加装固态硬盘和内存条
- DASCTF6月赛Pwn-azez_heap wp