文章目录
前言
承接上一篇关于React Context技术的文章。React Context技术在页面主题修改应用上提供了较好的方法,同时React还提供了ContextType技术,用于实现对Context技术进行简化书写。本篇文章对这两个概念进行讲解,最后再讲解Context默认值的使用方法。
在开始正式讲解之前, 再次强调React Context的功能:实现组件之间的数据传递。
一、案例:更改页面的主题
1、案例要求
页面中有两个超级链接,用于控制页面中内容的主题颜色。两个超级链接分别是“浅色主题”和“深色主题”。为了掩饰主题的更改,在页面中还设置了一个div容器,深浅色主题对应该div容器不同的背景颜色。div容器中有文本和一个命令按钮,深浅色主题也对应着文本的不同颜色和按钮的不同样式。案例的最终效果图如下所示。
2、案例分析
首先,我们要在所有组件以外预设好两个主题的参数。根据对效果图的观察,两个不同的主题主要对应的是背景颜色、文本颜色、按钮颜色三个组成部分。规划具体的主题参数如下所示。
背景颜色 | 文本颜色 | 按钮颜色样式 | |
---|---|---|---|
浅色模式 | #dddddd | #000000 | .btn-primary |
深色模式 | #222222 | #ffffff | .btn-danger |
在上述表中,为按钮颜色规划的是Bootstrap框架中的两种不同的按钮背景颜色类。如果不使用Bootstrap,也可以在CSS文件中独立书写这两个类,并为这两个类设置不同的外观。
按照上述表中的外观规划,定义一个themes的对象,包含两种主题样式,代码如下所示。
const themes={
light:{
className:'btn btn-primary',
backgroundColor:'#ddd',
color:'#000'
},
dark:{
className:'btn btn-danger',
backgroundColor:'#222',
color:'#fff'
}
};
3、案例组件划分
其次,我们来为这个案例进行组件划分。很显然,我们可以将其划分为两个组件:
- 父组件<App />:实现改变主题的超级链接和整个案例的布局。
- 子组件<Content />:实现案例下方的<div>容器和其内部的文本与按钮。
4、<App />组件的实现
在书写组件<App />时,要先创建Context对象,并解构出生产组件和消费组件。
const {
Provider,Consumer} = React.createContext