如何在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構建一個主題切換器的簡單示例。