如何在React中使用Context API和Hooks构建一个主题切换器

首先，我们需要创建一个Context来存储主题信息。在一个单独的文件中创建一个ThemeContext.js文件：

import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

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

接下来，我们可以在App.js中使用ThemeProvider包裹整个应用，并在需要的地方使用ThemeContext来获取主题信息和切换主题。例如，我们可以创建一个ThemeToggle组件来切换主题：

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

const ThemeToggle = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'Switch to Dark Theme' : 'Switch to Light Theme'}
    </button>
  );
};

export default ThemeToggle;

最后，在App.js中，我们可以使用ThemeProvider包裹整个应用，并在需要的地方使用ThemeContext来获取主题信息和切换主题：

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

const App = () => {
  return (
    <ThemeProvider>
      <div>
        <h1>Theme Switcher</h1>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
};

export default App;

现在，当用户点击按钮时，主题会在light和dark之间切换。这就是如何在React中使用Context API和Hooks构建一个主题切换器的简单示例。