react如何获取document

获取 document 的方法

在 React 中直接操作 document 对象通常需要谨慎处理，因为它可能绕过 React 的虚拟 DOM 机制。以下是几种常见的方法：

使用 document 全局对象

在组件中直接调用 document 即可访问 DOM：

const element = document.getElementById('myElement');

通过 ref 获取 DOM 节点

使用 useRef 或 createRef 可以安全地获取 React 组件对应的 DOM 节点：

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    console.log(divRef.current); // 获取对应的 DOM 节点
  }, []);

  return <div ref={divRef}>Content</div>;
}

在生命周期方法中访问

类组件中可以通过生命周期方法访问 document：

componentDidMount() {
  const title = document.title;
  console.log(title);
}

注意事项

• 避免直接修改 document 管理的 DOM，优先使用 React 的状态管理
• SSR（服务端渲染）环境下 document 不存在，需通过 typeof window !== 'undefined' 做防护
• 样式修改推荐通过 className 或 style props 实现而非直接操作 DOM 样式