如何将暗黑模式切换的jQuery代码迁移至React实现

核心思路 #

React不推荐直接操作DOM（像jQuery那样），而是通过状态管理控制UI变化。我们可以用useState维护主题状态，再通过useEffect同步更新body类名，或者直接把主题类绑定到根组件上。

具体实现代码 #

假设你的App.js有基础组件结构，直接添加主题切换逻辑即可：

import { useState, useEffect } from 'react';

function App() {
  // 初始化状态：默认未启用浅色主题（对应原jQuery初始无light-theme类的状态）
  const [isLightTheme, setIsLightTheme] = useState(false);

  // 监听状态变化，同步更新body的类名
  useEffect(() => {
    if (isLightTheme) {
      document.body.classList.add('light-theme');
    } else {
      document.body.classList.remove('light-theme');
    }
  }, [isLightTheme]); // 仅当isLightTheme变化时执行

  // 主题切换点击事件处理函数
  const handleThemeSwitch = () => {
    setIsLightTheme(prev => !prev);
  };

  return (
    <div className="App">
      {/* 绑定切换事件到主题按钮 */}
      <button className="theme-switch" onClick={handleThemeSwitch}>
        切换主题
      </button>
      {/* 你的其他页面内容 */}
    </div>
  );
}

export default App;

替代方案（无需useEffect） #

如果你的整个应用都包裹在App组件的根div中，也可以直接把主题类绑定到这个div上，不用操作body：

import { useState } from 'react';

function App() {
  const [isLightTheme, setIsLightTheme] = useState(false);

  const handleThemeSwitch = () => {
    setIsLightTheme(prev => !prev);
  };

  return (
    <div className={`App ${isLightTheme ? 'light-theme' : ''}`}>
      <button className="theme-switch" onClick={handleThemeSwitch}>
        切换主题
      </button>
      {/* 你的其他页面内容 */}
    </div>
  );
}

export default App;

关键说明 #

• 用useState保存主题状态，替代jQuery直接操作DOM的方式，符合React数据流理念
• 通过onClick直接绑定按钮点击事件，不用依赖选择器查找DOM元素
• 如果原模板样式是基于body类实现的，就用useEffect方案同步更新body类名；否则可以直接绑定到根组件div上

内容的提问来源于stack exchange，提问作者Aaron Lorenzo Woods