react context toggleButton demo

//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: () => {},
});

原文地址:https://www.cnblogs.com/begin256/p/10162096.html

时间: 2024-10-14 19:51:22

react context toggleButton demo的相关文章

React Context

[React Context] 1.Why Not To Use Context The vast majority of applications do not need to use context. 大多数应用不需要使用context. If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future rele

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

纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab是被选中的,哪个该被隐藏: getChildren() { let index = 0; let count = 0; const children = this.props.children; const state = this.state; const tabIds = this.tabIds

react todoList小demo

基于create-react-app做的小demo 比较简单直接上代码 效果图 import React from 'react' import Input from '../../components/Input/index' import List from '../../components/List/index' class Todo extends React.Component{ constructor(props){ super(props) this.state={ todos:

React问答小demo

在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次点击,隐藏表单.同时,点击"取消"按钮,隐藏表单. 2.输入问题标题和内容后,点击"确认"按钮,将问题显示在下方(按照投票数从高到低). 3.每个问题有加票和减票功能,在点击的同时,将问题按照投票数从高到低排序. 实现过程: 一.开发环境和工具 1.npm init (

[React] Use React Context to Manage Application State Through Routes

We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down t

React Native八大Demo

参考资料:http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的组合效果 7.图片下拉放大 8.原生视频播放器 9.react-navigation的使用和变更 10.倒计时 11.多张图片查看 12.自

React Router简单Demo

简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-native这三个包,分别是路由核心组件和浏览器端组件和native端组件,所以我们需要安装react-router-dom npm install --save react-router-dom 安装后就可以直接使用了 https://codepen.io/pshrmn/pen/YZXZqM?edito

用react写一个demo,增删列表

今天学了一点react,挺好玩的哈哈,分享一下demo 1.环境搭建 (1)首先进入node.js官网,下载nods.js后安装,安装成功后会自带安装npm,接下来验证是否安装成功,在cmd中输入node -v和npm -v后若输出版本号及证明安装成功,如下: (2)下载submit._text,进入submit官网,下载软件后安装即可 2.react项目创建 (1)进入cmd,输入命令 npx create-react-app app cd app npm start 即可创建一个名为app的

[React]Context机制

在React中,Context机制是为了方便在组件树间传递数据. 例子 import React from 'react' const themes={ light:"亮色主题", dark:"暗色主题" } const sexs={ man:"男性", wem:"女性", } const SexContext=React.createContext(sexs.man); const ThemeContext=React.cr