//toggleButton demo:

//code:

//1.Appb.js:

import React from 'react';
import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';

class Appb extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
    // State 包含了 updater 函数 所以它可以传递给底层的 context Provider
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    // 入口 state 传递给 provider
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

export default Appb
//2.theme-toggler-button.js:
import {ThemeContext} from './theme-context';
import React from 'react';

function ThemeTogglerButton() {
  // Theme Toggler 按钮不仅接收 theme 属性
  // 也接收了一个来自 context 的 toggleTheme 函数
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default ThemeTogglerButton;
//3.theme-context.js:
// 确保默认值按类型传递
// createContext() 匹配的属性是 Consumers 所期望的
import React from 'react';
export const themes = {
  light: {
    foreground: '#ffffff',
    background: '#222222',
  },
  dark: {
    foreground: '#000000',
    background: '#eeeeee',
  },
};
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

react context toggleButton demo的更多相关文章

  1. React context基本用法

    React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递.React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的 ...

  2. [React] Prevent Unnecessary Rerenders of Compound Components using React Context

    Due to the way that React Context Providers work, our current implementation re-renders all our comp ...

  3. React Context API

    使用React 开发程序的时候,组件中的数据共享是通过数据提升,变成父组件中的属性,然后再把属性向下传递给子组件来实现的.但当程序越来越复杂,需要共享的数据也越来越多,最后可能就把共享数据直接提升到最 ...

  4. 探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)

    Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...

  5. React Hooks +React Context vs Redux

    React Hooks +React Context vs Redux https://blog.logrocket.com/use-hooks-and-context-not-react-and-r ...

  6. [译]迁移到新的 React Context Api

    随着 React 16.3.0 的发布,context api 也有了很大的更新.我已经从旧版的 api 更新到了新版.这里就分享一下我(作者)的心得体会. 回顾 下面是一个展示如何使用旧版 api ...

  7. 使用react context实现一个支持组件组合和嵌套的React Tab组件

    纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab ...

  8. [译]React Context

    欢迎各位指导与讨论 : ) 前言 由于笔者英语和技术水平有限,有不足的地方恳请各位指出.我会及时修正的 O(∩_∩)O 当前React版本 15.0.1 时间 2016/4/25 正文 React一个 ...

  9. React Native官方DEMO

    官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法. 运行官方DEMO步骤如下 安装react native环境 React Native项目源 ...

随机推荐

  1. Python的垃圾回收机制以及引用计数

    Python中的计数引用 在Python中,由于Python一门动态的语言,内部采用的指针形式对数据进行标记的,并不像c/c++那样,通过指定的数据类型并分配相应的数据空间,Python中定义的变量名 ...

  2. mongodb主从备份 和 手动主从切换

    环境: 主机A:172.16.160.91 主机B:172.16.160.92 配置主机A [root@master zhxf]# cat docker-compose.yml version: '3 ...

  3. 【性能测试】:LR中解决接口请求中包含中文字符,服务器不识别的问题

    在LR中,直接写的接口请求,如果请求字段包含中文字段,服务器会不识别,这个时候就要用到lr_convert_string_encoding这个函数: 具体用法: lr_convert_string_e ...

  4. 【性能测试】:loadrunner直压MYSQL数据库的脚本开发

    有时性能测试,会涉及到直接压测数据库,测试数据库处理sql的水平,或者通过sql脚本向数据库写数据做铺地数据 这里贴上一个自己用的对数据库操作的脚本 一,首先要去下载一个LR压MYSQL的一个库文件, ...

  5. .NET熔断之Polly

    1. Net Core 中有一个被.Net 基金会认可的库 Polly,可以用来简化熔断降级的处理.主要功能:重试(Retry):断路器(Circuit-breaker):超时检测(Timeout): ...

  6. Scrapyd-Client的安装

    1. pip安装 这里推荐使用pip安装,相关命令如下: pip3 install scrapyd-client 2.验证安装 安装成功后会有一个可用命令,叫作scrapyd-deploy,即部署命令 ...

  7. 剑指offer——面试题32:从上到下打印二叉树

    void BFS(BinaryTreeNode* pRoot) { if(pRoot==nullptr) { cout<<"empty binary tree!"< ...

  8. spring boot快速入门 9: 单元测试

    进行单元测试: service第一种方式: 第一步:在指定service中创建一个方法进行测试 /** * 通过ID查询一个女生的信息 * @param id * @return */ public ...

  9. mac环境下使用docker安装nginx

    前言 距离上一篇文章已经很长时间,近期实在事情太多了,也没来得及继续更新一些新的内容.现在开发使用的工作实在太多了,小编实在忍受不了windows那样卡机的状态,于是最近换了一个mac电脑,虽然做开发 ...

  10. 入门系列之在Ubuntu上安装Drone持续集成环境

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小铁匠米兰的v 发表于云+社区专栏 介绍 Drone是一个流行的持续集成和交付平台.它集成了许多流行的版本控制存储库服务,如GitHu ...