react中如何拿到body
获取 body 元素的方法
在 React 中，可以通过多种方式访问或操作 document.body，以下是常见的方法：
直接使用 DOM API
在组件中直接调用 document.body 即可访问或修改 body 元素。例如：
// 修改背景色
document.body.style.backgroundColor = 'lightblue';使用 useEffect 钩子
在函数组件中，推荐在 useEffect 中操作 DOM，确保组件挂载后再访问 body：
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
document.body.style.padding = '20px';
return () => {
document.body.style.padding = ''; // 清理效果
};
}, []);
return <div>Content</div>;
}通过 ref 间接操作
若需动态生成内容并插入 body，可使用 ReactDOM.createPortal 或 ref：
import { useRef, useEffect } from 'react';
function BodyModifier() {
const bodyRef = useRef(document.body);
useEffect(() => {
bodyRef.current.classList.add('custom-class');
}, []);
return null;
}注意事项
- 避免在渲染阶段直接操作 DOM，可能导致渲染冲突。
- 服务端渲染（SSR）时
document不存在，需通过typeof window !== 'undefined'做条件判断。 - 动态修改 body 后，应在组件卸载时恢复原状态以防止内存泄漏。
