如果有这样一个结构:三级嵌套,分别是:一级父组件、二级子组件、三级孙子组件,且前者包含后者,结构如图:

如果把一个属性,比如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组件实现越级传递属性的更多相关文章

  1. react组件的数据传递

    在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信. 1, ...

  2. React 组件传值 父传递儿子

    10===> 传递参数 import React from "react" //一定要导入React // 函数类型去创建组件 export function Web1(pr ...

  3. React组件和生命周期简介

        React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...

  4. 【react 样式】给react组件指定style

    1.使用行内样式(优先级高) 自定义的react组件是没有style属性的,如果要给想给自定义react组件指定style,我的方法是用一个<div>包裹自定义组件,然后给div指定sty ...

  5. 13. VUE 组件之间数据传递

    组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...

  6. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  7. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  8. React组件属性/方法/库属性

    1. propTypes 用于进行props的类型检查:来自于prop-types库. // V15.5之后 import PropTypes from 'prop-types'; 该方法适用于函数组 ...

  9. vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

随机推荐

  1. Spark性能优化之道——解决Spark数据倾斜(Data Skew)的N种姿势

    原创文章,同步首发自作者个人博客转载请务必在文章开头处注明出处. 摘要 本文结合实例详细阐明了Spark数据倾斜的几种场景以及对应的解决方案,包括避免数据源倾斜,调整并行度,使用自定义Partitio ...

  2. Azure Messaging-ServiceBus Messaging消息队列技术系列3-消息顺序保证

    上一篇:Window Azure ServiceBus Messaging消息队列技术系列2-编程SDK入门  http://www.cnblogs.com/tianqing/p/5944573.ht ...

  3. Flume-ng源码解析之Channel组件

    如果还没看过Flume-ng源码解析之启动流程,可以点击Flume-ng源码解析之启动流程 查看 1 接口介绍 组件的分析顺序是按照上一篇中启动顺序来分析的,首先是Channel,然后是Sink,最后 ...

  4. JS入门(四)

    接之前一篇的函数.写之前的函数的时候讲的比较笼统,在这重新写一下函数的内容. 函数: 之前提过,函数就是代码复用的一种机制或是将代码封装成功能的代码段.函数的声明在这边就不多提了,因为相对来说比较简单 ...

  5. Remove Element leetcode

    Given an array and a value, remove all instances of that value in place and return the new length. T ...

  6. 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课

    1644: [Usaco2007 Oct]Obstacle Course 障碍训练课 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 383  Solved ...

  7. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. ObjC中的AOP--面向切面编程

    上篇博客我们类比着Java的Spring框架中的依赖注入的实现方式,也试着使用Objective-C来写了一下OC中的依赖注入的实现方式.当然,我们是使用的PList文件来加载的依赖注入时用到的依赖关 ...

  9. 腾讯云数据库团队:phpMyAdmin中sql-parser组件的使用

    phpMyAdmin是一款基于Web端运行的开源数据库管理工具,支持管理MySQL和MariaDB两种数据库. phpMyAdmin的程序主要使用php和javascript开发,它的安装使用都比较简 ...

  10. Go语言并发机制初探

    Go 语言相比Java等一个很大的优势就是可以方便地编写并发程序.Go 语言内置了 goroutine 机制,使用goroutine可以快速地开发并发程序, 更好的利用多核处理器资源.这篇文章学习 g ...