React中如何通过菜单按钮切换body元素类名？

你的问题核心是React中不该直接操作DOM，而是要通过状态驱动来处理，同时因为body是全局DOM元素，需要用useEffect来同步状态和DOM变化。先纠正你原代码的问题：event是点击事件对象，你通过它找body肯定找不到，应该直接用document.body，但React不推荐直接这么写，下面是标准解决方案：

方案：状态+useEffect同步DOM类名 #

这是React中处理全局DOM元素的常规方式，既符合React的状态管理思路，又能正确操作body类名：

1. 导入React的useState和useEffect钩子
2. 定义状态变量控制侧边栏的展开/收起状态
3. 用useEffect监听状态变化，同步修改body的类名

完整代码示例：

import { useState, useEffect } from 'react';

function YourComponent() {
  // 定义状态，记录侧边栏是否收起
  const [isSideNavToggled, setIsSideNavToggled] = useState(false);

  // 切换状态的函数，只负责修改状态，不碰DOM
  const toggleSideMenu = () => {
    setIsSideNavToggled(prevState => !prevState);
  };

  // 监听状态变化，同步修改body类名
  useEffect(() => {
    // 第二个参数是强制状态：true添加类，false移除，比toggle更可靠
    document.body.classList.toggle('sb-sidenav-toggled', isSideNavToggled);

    // 组件卸载时清理，避免类名残留
    return () => {
      document.body.classList.remove('sb-sidenav-toggled');
    };
  }, [isSideNavToggled]); // 依赖状态，状态变才执行

  return (
    <button onClick={toggleSideMenu} id="sidebarToggle">
      <i className="fas fa-bars"></i>
    </button>
  );
}

为什么要这么做？ #

• 符合React的单向数据流原则：状态是唯一数据源，DOM只是状态的渲染结果，避免直接操作DOM导致的状态与DOM不一致问题
• useEffect的清理函数能确保组件卸载时还原body的类名，不会影响其他页面或组件
• 状态驱动的方式更容易扩展，比如后续要根据其他条件控制侧边栏状态，直接修改状态逻辑即可

另外，你原来的按钮里有href="#!"，React的button元素不需要这个属性，可以删掉。

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