使用Context,可以跨越组件进行数据传递

import React from 'react';
import ReactDOM from 'react-dom'; const ThemeContext = React.createContext({
background: 'red',
color: 'white'
});

通过静态方法React.createContext()创建一个Context对象,这个Context对象包含两个组件,<Provider /><Consumer />

class App extends React.Component {
render () {
return (
<ThemeContext.Provider value={{background: 'green', color: 'white'}}>
<Header />
</ThemeContext.Provider>
);
}
}

<Provider />value相当于现在的getChildContext()

class Header extends React.Component {
render () {
return (
<Title>Hello React Context API</Title>
);
}
} class Title extends React.Component {
render () {
return (
<ThemeContext.Consumer>
{context => (
<h1 style={{background: context.background, color: context.color}}>
{this.props.children}
</h1>
)}
</ThemeContext.Consumer>
);
}
}

<Consumer />children必须是一个函数,通过函数的参数获取<Provider />提供的Context

参考自:https://www.jianshu.com/p/eba2b76b290b

React 之React.createContext的更多相关文章

  1. react之react Hooks

    函数组件,没有 class 组件中的 componentDidMount.componentDidUpdate 等生命周期方法,也没有 State,但这些可以通过 React Hook 实现. Rea ...

  2. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  3. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  4. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  5. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  6. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  7. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  8. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

  9. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. 动画演示 Delphi 2007 IDE 功能[2] - 定义变量

    https://my.oschina.net/hermer/blog/319152 动画剧本: 第一个变量: 输入: var; 然后执行 Ctrl+J ... 回车 第二个变量: 执行 Ctrl+J; ...

  2. oracle ogg--ogg搭建过程中遇到的错误及处理

    1 PRVF-0002 : Could not retrieve local nodename---# Begin Stacktrace #---------------------------ID: ...

  3. Linux /dev/shm

    /dev/shm是Linux下的一个目录,/dev/shm目录不在磁盘上,而是在内存中,因此使用Linux /dev/shm的效率非常高,直接写进内存 可以通过两个脚本验证Linux /dev/shm ...

  4. 【监控笔记】【3.1】DML(CDC)、DDL(DDL触发器)跟踪数据更改,数据库审计

    关键词:数据库审计.DDL审计.DML审计 [监控笔记][3.1]DML(CDC).DDL(DDL触发器)跟踪数据更改 [1]DML(CDC) 2008及以上 https://www.cnblogs. ...

  5. MySQL-快速入门(1)基本数据库、表操作语句

    1.创建数据库 create database db_name;show create database db_name\G; //查看数据创建语句show databases; //查看当前创建的数 ...

  6. jquery导航栏高亮(二级菜单点击一级保持高亮)

    <script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...

  7. Redis---使用场景

    3.使用场景 计数器   可以对String进行自增自减运算,从而实现计算器功能.   Redis这种内存型数据库的读写性能非常高,很适合存储频繁读写的及数量 缓存   将热点数据放到内存中,设置内存 ...

  8. C#设计模式:备忘录模式(Memento Pattern)

    一,C#设计模式:备忘录模式(Memento Pattern) 1.发起人角色(Originator):记录当前时刻的内部状态,负责创建和恢复备忘录数据.负责创建一个备忘录Memento,用以记录当前 ...

  9. oracle数据库中的存储函数

    oracle中的存储函数,和系统内的函数类似,可以像调用系统函数一样调用存储函数.它与存储过程的唯一区别就是存储过程没有return返回值,存储函数可以与存储过程互换,存储函数可以在存储过程中调用. ...

  10. 更改导航栏的背景和文字Color

    更改导航栏的背景和文字Color方法一: [objc] view plaincopy//set NavigationBar 背景颜色&title 颜色  [self.navigationCon ...