可以把context理解成一个全局变量，值是一个对象，其他组件（类组件、函数组件）可以直接使用。

原理：

• 最终class类名的生成有多个因素构成：组件名称 + 样式内容生成的hash值 + ...

定位：

• 通过配置，可以自定义类名的生成方式

• 可以在使用组件时添加自定义类名

深入且全面的学习一个库，能够解决日常开发中的几乎所有问题。

确认是否导入：import ThemeContext from './theme-context'

react组件jsx，   行内style固定写法就是双花括号   

①外层花括号：因为React使用的是JSX语法，JSX语法中嵌入任何js变量、表达式、对象都要用花括号{}扩起来，

②内层花括号：JSX如果用到行内CSS style样式时，这个行内样式必须是一个js对象，即{background:'theme.background'}是一个对象所以用花括号扩起来。

你那个错误写法一运行就报错

楼上不对，函数后面加括号是立马执行的意思，立马执行的话当前this是dom节点也就是a标签，而加了个箭头函数返回值是this.changeTheme('light')，意思就是我点击后执行这个箭头函数然后返回this.changeTheme('light')，就不是立马执行了

每个弹框做一个单独的表单,表单属性值存到缓存里面,可以是cookie,也可以是一个变量,利用子传父,或者存储到状态管理里面,这样的话后续的功能其实都可以做.主要还是说要把弹框组件的属性值存储在哪里.

<a href="theme-switcher" className="btn btn-light" onClick={()=>{this.changeTheme('light')}}>Light</a>           <a href="theme-switcher" className="btn btn-secondary" onClick={()=>{this.changeTheme('dark')}}>Dark</a> 

把下划线下的改成href="javascript:;"应该就不会刷新页面了

是我粗心了，在

ThemeContext.Provider value = {themes.Dark}>

中的value值大小写填错了，现在已经输出正确了，但是ThemedBar的第一行还是会报错，不过不影响运行，这是什么原因啊？

嗯 应该是的 这里讲的有些问题 不过绑定了也不会出啥问题

样式按钮都是为了美化 可以不加

你应该是 import 的错误，导入了一个undefined,ThemeContext 你引进来的是 undefined， 你去看看你引入这个东西和导出这个东西的文件是否有错误

es6 新特性，属性的简洁表示法，可以看这个对象的扩展