React如何实现LightButton的useState状态全局共享以切换暗黑模式

你遇到的是React中组件状态共享的典型问题——局部状态无法跨组件同步，重复写状态又会导致冗余和不一致。下面给你两种实用的解决思路，都能实现用LightButton控制全局暗黑模式：

方案一：状态提升（适合组件层级较浅的场景） #

把darkMode状态从LightButton组件提升到它和Header的共同父组件（比如App组件），然后通过props把状态和切换函数传递给需要的组件。

步骤示例： #

1. 在父组件（比如App.js）中定义全局状态和切换函数：

import { useState, useEffect } from 'react';
import LightButton from './LightButton';
import Header from './Header';

function App() {
  // 从localStorage读取初始状态，刷新后保持模式
  const [darkMode, setDarkMode] = useState(() => {
    return localStorage.getItem('darkMode') === 'true';
  });

  // 切换模式时同步到localStorage
  const toggleDarkMode = () => {
    const newMode = !darkMode;
    setDarkMode(newMode);
    localStorage.setItem('darkMode', newMode);
  };

  // 同步Bootstrap的暗黑模式（通过修改data-bs-theme属性）
  useEffect(() => {
    document.documentElement.setAttribute('data-bs-theme', darkMode ? 'dark' : 'light');
  }, [darkMode]);

  return (
    <div>
      {/* 把切换函数传给LightButton */}
      <LightButton darkMode={darkMode} onToggle={toggleDarkMode} />
      {/* 把darkMode状态传给Header */}
      <Header darkMode={darkMode} />
      {/* 其他需要暗黑模式的组件也同理传递props */}
    </div>
  );
}

export default App;

2. 修改LightButton组件，用父组件传来的props替代自身的状态：

// LightButton.js
import { Form } from 'react-bootstrap';

function LightButton({ darkMode, onToggle }) {
  return (
    <Form.Check
      type="switch"
      id="dark-mode-switch"
      label={darkMode ? '暗黑模式' : '浅色模式'}
      checked={darkMode}
      onChange={onToggle}
    />
  );
}

export default LightButton;

3. 修改Header组件，根据父组件传来的darkMode调整样式：

// Header.js
function Header({ darkMode }) {
  return (
    <header className={`bg-${darkMode ? 'dark' : 'light'} text-${darkMode ? 'light' : 'dark'}`}>
      <h1>我的页面标题</h1>
    </header>
  );
}

export default Header;

方案二：Context API（适合组件层级深、props传递麻烦的场景） #

如果你的组件层级很多（比如Header嵌套在多层组件里），用props传递会很繁琐，这时候可以用React的Context API来实现全局状态共享。

步骤示例： #

1. 创建DarkModeContext文件：

// DarkModeContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const DarkModeContext = createContext();

export function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(() => {
    return localStorage.getItem('darkMode') === 'true';
  });

  const toggleDarkMode = () => {
    const newMode = !darkMode;
    setDarkMode(newMode);
    localStorage.setItem('darkMode', newMode);
  };

  useEffect(() => {
    document.documentElement.setAttribute('data-bs-theme', darkMode ? 'dark' : 'light');
  }, [darkMode]);

  return (
    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
}

// 自定义hook，简化组件中获取Context的操作
export function useDarkMode() {
  return useContext(DarkModeContext);
}

2. 在App组件中用Provider包裹所有子组件：

// App.js
import { DarkModeProvider } from './DarkModeContext';
import LightButton from './LightButton';
import Header from './Header';

function App() {
  return (
    <DarkModeProvider>
      <LightButton />
      <Header />
      {/* 所有需要暗黑模式的组件都放在这里面 */}
    </DarkModeProvider>
  );
}

export default App;

3. 修改LightButton组件，用自定义hook获取切换函数：

// LightButton.js
import { Form } from 'react-bootstrap';
import { useDarkMode } from './DarkModeContext';

function LightButton() {
  const { darkMode, toggleDarkMode } = useDarkMode();
  return (
    <Form.Check
      type="switch"
      id="dark-mode-switch"
      label={darkMode ? '暗黑模式' : '浅色模式'}
      checked={darkMode}
      onChange={toggleDarkMode}
    />
  );
}

export default LightButton;

4. 修改Header组件，用自定义hook获取状态：

// Header.js
import { useDarkMode } from './DarkModeContext';

function Header() {
  const { darkMode } = useDarkMode();
  return (
    <header className={`bg-${darkMode ? 'dark' : 'light'} text-${darkMode ? 'light' : 'dark'}`}>
      <h1>我的页面标题</h1>
    </header>
  );
}

export default Header;

补充说明 #

• 两种方案都结合了Bootstrap的data-bs-theme属性，设置后Bootstrap的内置组件（比如按钮、导航栏）会自动切换暗黑/浅色样式，不用自己写太多CSS。
• 加入localStorage是为了让用户刷新页面后，之前选择的模式不会丢失，提升体验。

内容的提问来源于stack exchange，提问作者VPAR261