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传递给所有容器和子组件的方式,底层也是利用了这个原理。
React组件实现越级传递属性的更多相关文章
- react组件的数据传递
在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信. 1, ...
- React 组件传值 父传递儿子
10===> 传递参数 import React from "react" //一定要导入React // 函数类型去创建组件 export function Web1(pr ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- 【react 样式】给react组件指定style
1.使用行内样式(优先级高) 自定义的react组件是没有style属性的,如果要给想给自定义react组件指定style,我的方法是用一个<div>包裹自定义组件,然后给div指定sty ...
- 13. VUE 组件之间数据传递
组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...
- React组件属性部类(propTypes)校验
React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React组件属性/方法/库属性
1. propTypes 用于进行props的类型检查:来自于prop-types库. // V15.5之后 import PropTypes from 'prop-types'; 该方法适用于函数组 ...
- vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
随机推荐
- Hadoop伪分布安装配置
安装环境: 系统:Ubuntu 14.10 64bit hadoop:2.5.1 jdk:1.8.0_11 安装步骤: 一.安装JDK 安装 jdk,并且配置环境以及设置成默认 sudo gedi ...
- 《Django By Example》第八章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:还有4章!还有4章全书就翻译完成了 ...
- One Card Poker
qsc oj 题目 提交 比赛 小组 排名 帮助 Mactavish 题目 我的提交 One Card Poker 发布时间: 2017年2月14日 14:02 最后更新: 2017年2月14日 ...
- 1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场
1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 498 Solve ...
- PowerDesigner建模应用(二)逆向工程,导出PDM文件前过滤元数据(表、视图、存储过程等)
在上一篇文章<PowerDesigner建模应用(一)逆向工程,配置数据源并导出PDM文件>步骤二中导出了目标数据库对应的PDM文件, 该文件中展示出了所有表的信息与关系. 某些业务场景下 ...
- JS事件监听器 addEventListener
一:例如:给id为mydiv1的div元素添加click事件监听器document.getElementById("mydiv1").addEventListener(" ...
- 浅谈python 手机crash和app crash循环执行问题
----------------引子---------------- app自动化测试人员经常遇见的问题,第一:手机抛的异常导致脚本循环停止!!!!!!!!第二:app抛的异常导致脚本循环停止!!!! ...
- Django REST framework使用ViewSets的自定义路由实现过程
在Django中使用基于类的视图(ClassView),类中所定义的方法名称与Http的请求方法相对应,才能基于路由将请求分发(dispatch)到ClassView中的方法进行处理,而Django ...
- windows phone 8.1开发 onedrive操作详解
原文出自:http://www.bcmeng.com/onedrive/ 小梦今天给大家分享一下windows phone 8.1开发 onedrive中的一些操作: Windows phone 8. ...
- iOS开发之Xib和storyboard对比
相同点: (2)都用来描述软件界面 (2)都用Interface Builder工具来编辑 不同点: (1)Xib是轻量级的,用来描述局部的UI界面 (2)Storyboard是重量级的,用来描述整个 ...