使用 useContext 在 React 中切换亮/暗主题

演示和完整代码

深入代码

这篇文章展示了一种使用 ReactuseContext和useStatehooks 实现暗/亮模式切换的方法。相关文件为src/ThemeProvider.tsx、src/index.tsx和src/App.tsx。

该项目使用 Typescript，但通过删除类型可以在 javascript 中实现相同的功能。

演示和完整代码

您可以在此处的 Netlify 上看到此简单应用程序的工作版本：

演示站点

完整代码可以在 github 上找到：

完整代码

深入代码

ThemeProvider.tsx

ThemeProvider在我们的组件中，我们将我们的定义Theme为亮或暗，并将我们的 ThemeContext 定义为具有两个属性的对象：theme和toggleTheme（主题和切换主题的能力将通过钩子提供给其他组件useContext）。

我们必须确保导出ThemeContext我们使用创建的对象React.createContext。

在组件内ThemeProvider，我们theme使用useState钩子维护我们的状态，并创建一个在和toggleTheme之间切换状态的函数。lightdark

为简单起见，我们根据当前状态是亮色还是暗色，简单地设置文档主体color和样式。最后，我们将值设置为和属性的对象导出。然后在组件内进行渲染。backgroundColorthemeThemeContext ProviderthemetoggleThemechildrenThemeContext.Provider

import React, { useState } from "react";
typescript;
type Theme = "light" | "dark";
type ThemeContext = { theme: Theme; toggleTheme: () => void };

export const ThemeContext = React.createContext<ThemeContext>(
  {} as ThemeContext
);

export const ThemeProvider: React.FC = ({ children }) => {
  const [theme, setTheme] = useState<Theme>("light");
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  const color = theme === "light" ? "#333" : "#FFF";
  const backgroundColor = theme === "light" ? "#FFF" : "#333";

  document.body.style.color = color;
  document.body.style.backgroundColor = backgroundColor;

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

索引.tsx

在我们的文件中index，我们只需将整个应用程序包装在新ThemeProvider组件中即可。当然，在实际项目中，我们不需要直接在应用程序级别执行此操作，只需确保任何需要theme或toggleTheme位于提供程序子树中的组件都可用即可。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeProvider';

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

应用程序.tsx

在App组件中，我们使用useContext钩子来访问theme字符串和toggleTheme函数。我们创建了一个简单的按钮，它可以切换主题，并且仅用于theme确定向用户显示的内容：“切换到暗黑模式”或“切换到亮黑模式”。

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

const App: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div>
      <div>Hi friend!</div>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'dark' : 'light'} mode
      </button>
    </div>
  );
};

export default App;

就是这样！

文章来源：https://dev.to/nas5w/toggling-light-dark-theme-in-react-with-usecontext-39hn