如何在React中使用Context API和Hooks構(gòu)建一個(gè)主題切換器

首先，我們需要?jiǎng)?chuàng)建一個(gè)Context來存儲主題信息。在一個(gè)單獨(dú)的文件中創(chuàng)建一個(gè)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包裹整個(gè)應(yīng)用，并在需要的地方使用ThemeContext來獲取主題信息和切換主題。例如，我們可以創(chuàng)建一個(gè)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包裹整個(gè)應(yīng)用，并在需要的地方使用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;

現(xiàn)在，當(dāng)用戶點(diǎn)擊按鈕時(shí)，主題會(huì)在light和dark之間切換。這就是如何在React中使用Context API和Hooks構(gòu)建一個(gè)主題切換器的簡單示例。