在App.js中引入ThemeContextProveder组件;
包裹住需要设置主题的组件:Navbar和SongList
import Navbar from “./components/Navbar”;
import SongList from “./components/SongList”;
import ThemeContextProvider from “./contexts/ThemeContext”;
function App() {
return (
);
}
export default App;
这样我们就能在Navbar和SongList里使用共享的数据了
获取数据的方式有两种,一种是通过contextType获取,另一种是通过consumer获取
Navbar.js
import React, { Component } from ‘react’
import { ThemeContext } from ‘…/contexts/ThemeContext’;
class Navbar extends Component {
static contextType = ThemeContext; // 使用contextType获取共享的数据
render() {
const { isLightTheme, light, dark } = this.context; // 解构变量
const theme = isLightTheme ? light : dark; // 当isLightTheme为true时,用浅色主题
// 返回带有主题样式的JSX模板内容
return (
Context App
- Home
- About
- Contact
)
}
}
export default Navbar;
效果:浅色主题的导航栏
import React, {Component} from ‘react’
import { ThemeContext } from ‘…/contexts/ThemeContext’;
class SongList extends Component {
static contextType = ThemeContext;
render(){
const { isLightTheme, light, dark } = this.context;
const theme = isLightTheme ? light : dark;
return (
- 大鱼
- 幽灵公主
- 望
)
}
}
export default SongList;
效果:浅色主题的导航栏和主体部分
Navbar.js
import React, { Component } from ‘react’
import { ThemeContext } from ‘…/contexts/ThemeContext’;
class Navbar extends Component {
render() {
// 调用Consumer方法,其child只能有一个,且为function
return (
<ThemeContext.Consumer>
{
(context) => {
const { isLightTheme, light, dark } = context;
const theme = isLightTheme ? light : dark;
return (
Context App
- Home
- About
- Contact
)
}
}
</ThemeContext.Consumer>
)
}
}
export default Navbar;
SongList.js
import React, { Component } from ‘react’
import { ThemeContext } from ‘…/contexts/ThemeContext’;
class SongList extends Component {
render() {
return (
<ThemeContext.Consumer>
{
(context) => {
const { isLightTheme, light, dark } = context;
const theme = isLightTheme ? light : dark;
return (
)
}
}
</ThemeContext.Consumer>
)
}
}
export default SongList;
效果同上
-
数据是存储在ThemeContext里的,props也可以传递函数,
-
因此,我们可以在ThemeContext里定义更新数据的函数,并传递给消费组件,
-
消费组件返回要更新的信号,ThemeContext就开始更新
// 更换主题
toggleTheme = () => {
this.setState({
isLightTheme: !this.state.isLightTheme
})
}
// 在原来传递state数据的基础上,加上更换主题的函数
render() {
return (
<ThemeContext.Provider value={{ …this.state, toggleTheme: this.toggleTheme }}>
{this.props.children}
</ThemeContext.Provider>
)
}
SongList组件接收该函数并给出回应
增加一个”切换主题“的按钮,点击一下就调用toggleTheme,切换主题样式
<ThemeContext.Consumer>
{
(context) => {
const { isLightTheme, light, dark, toggleTheme } = context; // 添加“切换主题”函数的解构
const theme = isLightTheme ? light : dark;
return (
切换主题
{/* 点击按钮时触发toggleTheme函数 */}
)
}
}
</ThemeContext.Consumer>
效果:
首先是创建新的context,功能比较简单,就是打招呼,hello~
-
定义了一个布尔变量isAGirl,默认为true
-
定义一个问候语的切换函数toggleGreeting
-
把state和函数都传递给消费组件
import React, { Component, createContext } from ‘react’;
export const GreetingContext = createContext();
class GreetingContextProvider extends Component {
state = {
isAGirl: true
}
// 更换问候语
toggleGreeting = () => {
this.setState({
isAGirl: !this.state.isAGirl
})
}
render() {
return (
<GreetingContext.Provider value={{ …this.state, toggleGreeting: this.toggleGreeting }}>
{this.props.children}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
。**深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-DSNaKSnJ-1715585963785)]
[外链图片转存中…(img-Q9rBrN4u-1715585963785)]
[外链图片转存中…(img-AO8KXzvX-1715585963786)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
-