react中如何拿到body

获取 body 元素的几种方法

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

直接使用 DOM API

const bodyElement = document.body;

在 React 组件中使用 useEffect 钩子

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const body = document.body;
    // 对 body 进行操作
  }, []);

  return <div>Component Content</div>;
}

使用 useRef 钩子 虽然 useRef 通常用于访问组件内的 DOM 元素，但也可以用来存储对 body 的引用

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

function MyComponent() {
  const bodyRef = useRef(document.body);

  useEffect(() => {
    // 通过 bodyRef.current 访问 body
  }, []);

  return <div>Component Content</div>;
}

在类组件中使用生命周期方法

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    const body = document.body;
    // 对 body 进行操作
  }

  render() {
    return <div>Component Content</div>;
  }
}

注意事项

访问 document.body 最好在组件挂载后执行（如 useEffect 或 componentDidMount 中），因为服务器端渲染(SSR)时 document 对象可能不存在。

修改 body 元素时要谨慎，因为它会影响整个页面而不仅仅是当前组件。通常更好的做法是通过 React 组件树来管理 UI，而不是直接操作 DOM。