React中如何切换CSS类？点击组件元素切换body类的正确方案

嘿，我来帮你把这个jQuery的逻辑转成React的标准写法～ 其实核心思路是用React的状态来管理切换状态，再同步到body元素上，下面分两种常用场景给你示例：

函数组件（React Hooks） #

这是现在React开发的主流方式，用useState维护状态，useEffect同步到body：

import { useState, useEffect } from 'react';

function NavComponent() {
  // 用状态跟踪导航是否激活
  const [isMobileNavActive, setIsMobileNavActive] = useState(false);

  // 当状态变化时，更新body的类
  useEffect(() => {
    const body = document.body;
    if (isMobileNavActive) {
      body.classList.add('mobileNavActive');
    } else {
      body.classList.remove('mobileNavActive');
    }

    // 组件卸载时清理类，避免影响其他页面
    return () => body.classList.remove('mobileNavActive');
  }, [isMobileNavActive]); // 仅当状态变化时触发

  // 点击切换状态
  const handleHamburgerClick = () => {
    setIsMobileNavActive(prev => !prev);
  };

  return (
    <div className="hmbWrapper" onClick={handleHamburgerClick}>
      {/* 这里放你的汉堡菜单内容 */}
      🍔 菜单
    </div>
  );
}

为啥这么写？ #

• 用useState保存切换状态，符合React状态驱动UI的设计理念，后续如果要根据这个状态做其他逻辑（比如显示菜单内容），直接用状态就行，不用再去查DOM。
• useEffect负责把状态同步到body上，同时组件卸载时会执行清理函数，防止mobileNavActive类一直留在body上。

类组件写法（兼容旧项目） #

如果你的项目还在使用类组件，可以用生命周期方法实现：

import React from 'react';

class NavComponent extends React.Component {
  state = {
    isMobileNavActive: false
  };

  componentDidUpdate(prevProps, prevState) {
    // 只有状态变化时才更新body类
    if (prevState.isMobileNavActive !== this.state.isMobileNavActive) {
      const body = document.body;
      this.state.isMobileNavActive 
        ? body.classList.add('mobileNavActive') 
        : body.classList.remove('mobileNavActive');
    }
  }

  componentWillUnmount() {
    // 清理body类
    document.body.classList.remove('mobileNavActive');
  }

  handleHamburgerClick = () => {
    this.setState(prev => ({ isMobileNavActive: !prev.isMobileNavActive }));
  };

  render() {
    return (
      <div className="hmbWrapper" onClick={this.handleHamburgerClick}>
        🍔 菜单
      </div>
    );
  }
}

偷懒的写法（不推荐，但能用） #

如果你只是单纯切换类，不需要跟踪状态，也可以直接在点击事件里操作DOM，就像jQuery那样，但这种写法不符合React的数据流，后续扩展会麻烦：

function NavComponent() {
  const handleHamburgerClick = () => {
    document.body.classList.toggle('mobileNavActive');
  };

  return (
    <div className="hmbWrapper" onClick={handleHamburgerClick}>
      🍔 菜单
    </div>
  );
}

总之，推荐用第一种Hooks的写法，既符合React的最佳实践，也方便后续维护～

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