context

容器（即上下文） → 装数据 → 可以传递到程序的多个地方
程序在执行时可访问的容器

import styles from ...则css要写module.css，否则无效果；
import from ...则css无须写module. ，否则无效果

使用

context.js

export const ThemeContext = React.createContext('red') // 这个是默认值

main.jsx

import BottomNav from './BottomNav/index'
import Header from './Header/index'
import BtnGroup from './BtnGroup/index'
import { ThemeContext } from './context'
class Main extends React.Component {state = {navData: ['第①','第②','第③','第④',],theme: 'black'}changeTheme = (theme) => {this.setState({theme})}render() {return (<ThemeContext.Provider value={this.state.theme}><div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}><Header>标题</Header><BtnGroup changeTheme={this.changeTheme} /><BottomNavdata={this.state.navData}></BottomNav></div></ThemeContext.Provider>)}
}
export default Main

Header组件

import './index.css'
import { ThemeContext } from '../context'class Header extends React.Component {render() {return (<ThemeContext.Consumer>{(theme) => {console.log('theme', theme);return (< header className={'title ' + `header-${theme}`} >{this.props.children}</header>)}}</ThemeContext.Consumer >)}
}
export default Header

BtnGroup组件

// 注意方法的绑定
import './index.css'
class BottomNav extends React.Component {render() {return (< div style={{ display: 'flex', justifyContent: 'space-around', flex: 1, paddingTop: '44px' }}><button onClick={() => this.props.changeTheme('black')}>Black</button><button onClick={() => this.props.changeTheme('orange')}>Orange</button><button onClick={() => this.props.changeTheme('purple')}>Purple</button><button onClick={() => this.props.changeTheme('red')}>Red</button></div>)}
}
export default BottomNav

总结

① 提供: export const ThemeContext = React.createContext(‘red’)
② Provide组件包裹组件树、传递value：<ThemeContext.Provider value={this.state.theme}></<ThemeContext.Provider>
③ Consumer使用theme（jsx + 回调函数参数为theme）

17 初探Context的使用场景相关推荐

MySQL8.0.17 - 初探 Clone Plugin
MySQL8.0.17推出了一个重量级的功能:clone plugin.允许用户可以将当前实例进行本地或者远程的clone.这在某些场景尤其想快速搭建复制备份或者在group replication里 ...
Android系统（17）---Context 原理
一.Context继承体系与 Context是如何创建的 1. Context继承体系只用记住一句:Activity . Service 与Application 都是继承自ContextWrap ...
React-18(组件化开发) -- 插槽 Context的应用场景 setState(18之前与18的对比)
React React中的插槽(slot) React对于需要插槽的情况非常灵活,有两种方案可以实现: 组件的children子元素: props属性传递React元素 children实现插槽每个 ...
9.17之前的安卓笔试题总结——持续更新
从周六开始,面试.笔试.宣讲会连轴转,昨天收到群面的fail通知之后,下午也不想去广工现场跟一群汉子手撕代码了,选择了爬床睡觉,过了一天的安逸日子,终于勤奋起来把之前的笔试盲点总结一下,虎牙面试的稍后 ...
android上下文关系,Android Context上下文的理解 Hua
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? Context概念在安卓对象中,Context是经常使用的元素-但应该也是错误使用率最高的. 你在加载资源.启动一个新 ...
业界首个面向NLP场景深度迁移学习框架
机器之心发布机器之心编辑部阿里云正式开源了深度迁移学习框架 EasyTransfer,本文详细介绍了 EasyTransfer 框架的核心功能近日,阿里云正式开源了深度迁移学习框架 EasyTr ...
android+单利模式中传递context,Android的Context详解
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? Android 是基于Java的,很多时候可以用Java的思想来等同思考,但是却不能和Java进程直接一个Main函数就 ...
android context继承关系,android中Context深入详解
以下分别通过Context认知角度,继承关系,对象创建等方面android中Context做了深入的解释,一起学习下. 1.Context认知. Context译为场景,一个应用程序可以认为是一个工作 ...
esper（4-3）-Non-Overlapping Context
语法 create context context_name start start_condition end end_condition 如: // 9点到17点此context才可用(以引擎的时 ...

17 初探Context的使用场景

context

使用

总结

17 初探Context的使用场景相关推荐

最新文章

热门文章