React 中明暗模式的切换

介绍

在这个项目中，你将学习如何创建一个允许用户在亮模式和暗模式之间切换的 React 应用程序。该项目将演示如何使用 React 上下文 API 和 useContext 钩子来管理全局主题状态。

👀 预览

项目预览

🎯 任务

在这个项目中，你将学习：

如何使用 React 的上下文 API 创建一个 ThemeContext
如何在 App 组件中使用 ThemeContext 根据主题更改整个应用程序的样式
如何在 Card 组件中使用 ThemeContext 根据主题更改卡片样式
如何使用 ThemeProvider 包装 App 组件，使主题上下文在整个应用程序中可用

🏆 成果

完成这个项目后，你将能够：

理解如何使用 React 上下文 API 管理全局状态
应用 useContext 钩子来访问上下文值
根据当前主题实现不同的样式
切换主题并更新全局状态

设置项目

在这一步中，你将学习如何设置项目并安装必要的依赖项。

打开你的代码编辑器，导航到项目目录。

├── components
│ └── Card.js
├── contexts
│ └── ThemeContext.js
├── App.css
├── App.js
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

文件说明：

components 目录包含所有组件文件。
contexts 目录包含需要完成的 ThemeContext.js 文件。

由于这是一个 React 项目，我们需要通过运行以下命令来安装依赖项：

npm install

安装完依赖项后，按照以下步骤访问项目：

在终端中运行以下命令启动本地服务器：

npm start

在编码环境右侧打开 web 服务器。你将看到如下所示的静态效果。目前，点击“暗模式”按钮不会有任何变化。

未完成的暗模式按钮

创建主题上下文（ThemeContext）

在这一步中，你将学习如何使用 React 的上下文 API 创建主题上下文。按照以下步骤完成此步骤：

打开位于 src/contexts 目录中的 ThemeContext.js 文件。

使用 React.createContext() 创建 ThemeContext：

export const ThemeContext = React.createContext();

创建将包装 App 组件并提供主题上下文的 ThemeProvider 组件：

export const ThemeProvider = (props) => {
  const [theme, setTheme] = React.useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};

ThemeProvider 组件将 theme 状态初始化为“light”，并将 theme 和 setTheme 值提供给上下文。

在 App 组件中使用主题上下文（ThemeContext）

在这一步中，你将学习如何在 App 组件中使用 ThemeContext，以便根据主题更改整个应用程序的样式。

打开 src/App.js 文件。
使用 useContext 钩子从 ThemeContext 中获取 theme 值：
```
const { theme } = useContext(ThemeContext);
```
更新 App 组件的 JSX，以便根据 theme 值应用不同的样式：
```
return (
  <div className={theme === "light" ? "app app-light" : "app app-dark"}>
    <Card></Card>
  </div>
);
```
根据 theme 值，app-light 和 app-dark 类将应用于主 div 元素。

在卡片（Card）组件中使用主题上下文（ThemeContext）

在这一步中，你将学习如何在“卡片”（Card）组件中使用“主题上下文”（ThemeContext），以便根据主题更改卡片样式。

打开 src/components/Card.js 文件。

使用 useContext 钩子从“主题上下文”中获取 theme 和 setTheme 值：

export const Card = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  //...
};

实现 handleThemeToggle 函数以切换主题：
```
const handleThemeToggle = (e) => {
  setTheme(theme === "light" ? "dark" : "light");
};
```
当按钮被点击时，此函数将更新“主题上下文”中的 theme 值。

使用主题提供器（ThemeProvider）包裹 App 组件

在这最后一步中，你将学习如何使用主题提供器（ThemeProvider）包裹 App 组件，以使主题上下文在整个应用程序中可用。

打开 src/index.js 文件。
从 ThemeContext.js 文件中导入主题提供器（ThemeProvider）：
```
import { ThemeProvider } from "./contexts/ThemeContext";
```

在 ReactDOM.render 函数中使用主题提供器（ThemeProvider）包裹 App 组件：

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

现在，App 组件及其子组件可以使用 useContext 钩子从主题上下文（ThemeContext）中访问 theme 和 setTheme 值。

完成挑战后，效果应如下所示：

主题切换演示动图

恭喜！你已完成该项目。现在你应该能够通过点击卡片组件中的按钮在亮模式和暗模式之间切换。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升技能。

在明暗模式之间切换

介绍