当前位置：首页 > React

react如何获取document

2026-01-24 02:29:35React

获取 document 对象的常用方法

在 React 中获取 document 对象与普通 JavaScript 相同，因为 document 是浏览器全局对象。以下是几种常见场景下的获取方式：

直接访问全局对象

const doc = document; // 直接使用全局document

在组件生命周期或钩子中访问

react如何获取document

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const title = document.title; // 在useEffect中访问
    console.log(title);
  }, []);
}

通过 ref 关联 DOM 元素后访问

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

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

  useEffect(() => {
    if (divRef.current) {
      const ownerDoc = divRef.current.ownerDocument; // 通过关联节点获取document
      console.log(ownerDoc);
    }
  }, []);

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

注意事项

服务端渲染 (SSR) 场景：在 Node.js 环境中（如 Next.js）直接访问 document 会导致错误，需通过 typeof window !== 'undefined' 做条件判断。
```
if (typeof window !== 'undefined') {
  const doc = document;
}
```
严格模式限制：React 18 的严格模式可能导致某些 DOM 操作执行两次，需确保逻辑幂等性。
自定义文档场景：使用框架如 Next.js 时，可通过 _document.js 文件自定义 HTML 文档结构，此时操作的是服务端生成的文档对象。