react中如何拿到body

在React中获取body元素可以通过以下几种方法实现：

使用document直接访问

通过浏览器提供的全局document对象直接访问body元素：

const bodyElement = document.body;

在useEffect中安全访问

在React组件中，为避免SSR（服务器端渲染）问题或未挂载时访问DOM，推荐在useEffect中操作：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const bodyElement = document.body;
    console.log(bodyElement);
  }, []);

  return <div>组件内容</div>;
}

通过ref动态绑定

如果需要操作body的子元素或动态修改样式，可以通过ref绑定：

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const bodyRef = useRef(null);

  useEffect(() => {
    bodyRef.current = document.body;
    console.log(bodyRef.current);
  }, []);

  return <div>组件内容</div>;
}

注意事项

• 在SSR环境（如Next.js）中，直接访问document可能导致错误，需通过typeof window !== 'undefined'判断：

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const bodyElement = document.body;
    }
  }, []);

• 修改body样式时，优先考虑通过React组件层级控制，而非直接操作DOM。