react如何获取document

获取 document 的方法

在 React 中获取 document 对象可以通过直接访问全局的 document 对象来实现。React 运行在浏览器环境中时，document 是全局可用的。

const doc = document;
console.log(doc.title); // 输出当前页面的标题

在组件中访问 document

在 React 组件中，可以直接在生命周期方法或 Hook 中访问 document。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log(document.title); // 组件挂载后输出标题
  }, []);

  return <div>Check the console for document title</div>;
}

使用 ref 获取 DOM 元素

如果需要获取特定的 DOM 元素，可以使用 useRef Hook 或 createRef。

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

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

  useEffect(() => {
    if (divRef.current) {
      console.log(divRef.current); // 输出 div 元素
    }
  }, []);

  return <div ref={divRef}>This is a div element</div>;
}

注意事项

• 在服务器端渲染（SSR）环境中（如 Next.js），document 不可用，直接访问会导致错误。可以通过条件判断避免：

if (typeof window !== 'undefined') {
  console.log(document.title);
}

• 避免频繁直接操作 DOM，尽量使用 React 的状态管理机制。