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,内部不管多少嵌套都可以直接取到最外 ...
随机推荐
- Spark性能优化之道——解决Spark数据倾斜(Data Skew)的N种姿势
原创文章,同步首发自作者个人博客转载请务必在文章开头处注明出处. 摘要 本文结合实例详细阐明了Spark数据倾斜的几种场景以及对应的解决方案,包括避免数据源倾斜,调整并行度,使用自定义Partitio ...
- Azure Messaging-ServiceBus Messaging消息队列技术系列3-消息顺序保证
上一篇:Window Azure ServiceBus Messaging消息队列技术系列2-编程SDK入门 http://www.cnblogs.com/tianqing/p/5944573.ht ...
- Flume-ng源码解析之Channel组件
如果还没看过Flume-ng源码解析之启动流程,可以点击Flume-ng源码解析之启动流程 查看 1 接口介绍 组件的分析顺序是按照上一篇中启动顺序来分析的,首先是Channel,然后是Sink,最后 ...
- JS入门(四)
接之前一篇的函数.写之前的函数的时候讲的比较笼统,在这重新写一下函数的内容. 函数: 之前提过,函数就是代码复用的一种机制或是将代码封装成功能的代码段.函数的声明在这边就不多提了,因为相对来说比较简单 ...
- Remove Element leetcode
Given an array and a value, remove all instances of that value in place and return the new length. T ...
- 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课
1644: [Usaco2007 Oct]Obstacle Course 障碍训练课 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 383 Solved ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- ObjC中的AOP--面向切面编程
上篇博客我们类比着Java的Spring框架中的依赖注入的实现方式,也试着使用Objective-C来写了一下OC中的依赖注入的实现方式.当然,我们是使用的PList文件来加载的依赖注入时用到的依赖关 ...
- 腾讯云数据库团队:phpMyAdmin中sql-parser组件的使用
phpMyAdmin是一款基于Web端运行的开源数据库管理工具,支持管理MySQL和MariaDB两种数据库. phpMyAdmin的程序主要使用php和javascript开发,它的安装使用都比较简 ...
- Go语言并发机制初探
Go 语言相比Java等一个很大的优势就是可以方便地编写并发程序.Go 语言内置了 goroutine 机制,使用goroutine可以快速地开发并发程序, 更好的利用多核处理器资源.这篇文章学习 g ...