ReactJS如何在页面存在特定class时为body添加对应类

以下是针对React场景的两种常用实现方式，可根据你的项目实际情况选择：

方案1：全局路由监听（React Router v6 函数组件场景首选） #

直接在根组件内监听路由变化，每次页面切换自动执行检测逻辑：

import { useEffect } from 'react';
import { useLocation, Outlet } from 'react-router-dom';

// 按需修改两个常量即可
const TARGET_CLASS = '你要检测的目标div类名';
const BODY_EXTRA_CLASS = '要给body添加的特定类名';

function App() {
  const location = useLocation();

  useEffect(() => {
    const bodyEl = document.body;
    // 检测当前页面是否存在目标div
    const hasTargetDiv = document.querySelector(`div.${TARGET_CLASS}`) !== null;

    hasTargetDiv 
      ? bodyEl.classList.add(BODY_EXTRA_CLASS)
      : bodyEl.classList.remove(BODY_EXTRA_CLASS);

    // 组件卸载时清理类名避免残留
    return () => bodyEl.classList.remove(BODY_EXTRA_CLASS);
  }, [location.pathname]); // 路由路径变化时自动触发检测

  return <Outlet />; // 你的路由出口逻辑
}

export default App;

方案2：单页面局部实现（仅个别页面存在目标div时使用） #

不需要全局监听，直接在对应页面组件内单独处理即可：

import { useEffect } from 'react';

const BODY_EXTRA_CLASS = '要给body添加的特定类名';

function TargetPage() {
  useEffect(() => {
    // 页面挂载时加类
    document.body.classList.add(BODY_EXTRA_CLASS);
    // 页面卸载时删类
    return () => document.body.classList.remove(BODY_EXTRA_CLASS);
  }, []);

  return <div className="你要检测的目标div类名">页面内容</div>;
}

特殊场景适配 #

如果目标div是异步渲染的（比如接口请求完成后才显示），可以加DOM监听避免检测时元素还未渲染：

useEffect(() => {
  const checkDiv = () => {
    const hasTarget = document.querySelector(`div.${TARGET_CLASS}`) !== null;
    hasTarget 
      ? document.body.classList.add(BODY_EXTRA_CLASS)
      : document.body.classList.remove(BODY_EXTRA_CLASS);
  };
  // 初始检测
  checkDiv();
  // 监听DOM变化处理异步渲染场景
  const observer = new MutationObserver(checkDiv);
  observer.observe(document.body, { childList: true, subtree: true });
  return () => observer.disconnect();
}, [location.pathname]);

如果你使用的是Next.js等SSR框架，所有document相关操作需要加typeof window !== 'undefined'判断，确保只在客户端执行。

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