React.js中如何为body标签添加类名

直接操作全局的body标签就能实现需求，这里给你几种实用的实现方式：

1. 基础场景：组件挂载时添加固定类名 #

适合只需要在应用启动时给body添加固定类名的场景，用useEffect钩子操作DOM即可：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 给body添加dark类
    document.body.classList.add('dark');
    
    // 可选：组件卸载时移除类名（比如页面切换时清理）
    return () => {
      document.body.classList.remove('dark');
    };
  }, []); // 空依赖数组保证只执行一次

  return (
    <div>你的应用内容</div>
  );
}

export default App;

2. 封装成自定义Hook（方便复用） #

如果多个组件都需要操作body类名，把逻辑封装成Hook能提升复用性：

import { useEffect } from 'react';

// 自定义Hook：管理body的类名
function useBodyClass(className) {
  useEffect(() => {
    const body = document.body;
    body.classList.add(className);

    // 清理函数：组件卸载时移除类名
    return () => {
      body.classList.remove(className);
    };
  }, [className]); // 依赖className，类名变化时自动更新
}

// 使用这个Hook
function App() {
  useBodyClass('dark');

  return (
    <div>你的应用内容</div>
  );
}

export default App;

3. 动态切换类名（比如主题切换场景） #

如果需要动态切换body的类名（比如深色/浅色主题切换），结合状态来控制即可：

import { useState, useEffect } from 'react';

function App() {
  // 用状态管理当前是否是深色模式
  const [isDarkMode, setIsDarkMode] = useState(true);

  useEffect(() => {
    if (isDarkMode) {
      document.body.classList.add('dark');
      document.body.classList.remove('light');
    } else {
      document.body.classList.add('light');
      document.body.classList.remove('dark');
    }
  }, [isDarkMode]); // 状态变化时更新body类名

  return (
    <div>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        切换主题
      </button>
      <p>当前主题：{isDarkMode ? '深色' : '浅色'}</p>
    </div>
  );
}

export default App;

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