当前位置：首页 > React

react如何获取document

2026-02-26 16:24:33React

在React中直接操作document对象需要谨慎，因为它可能绕过虚拟DOM机制，但某些场景（如集成第三方库或直接DOM操作）确实需要。以下是几种常见方法：

使用`useEffect`钩子访问`document`

在函数组件中，通过useEffect钩子在组件挂载后安全访问document：

react如何获取document

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const title = document.title;
    console.log('Current document title:', title);
  }, []); // 空依赖数组确保仅在挂载时执行

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

通过`ref`获取DOM元素

使用useRef获取特定DOM节点的引用，避免直接查询整个文档：

react如何获取document

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

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

  useEffect(() => {
    if (divRef.current) {
      console.log('Div width:', divRef.current.offsetWidth);
    }
  }, []);

  return <div ref={divRef}>Measure this element</div>;
}

类组件中的`componentDidMount`

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

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    const bodyColor = document.body.style.backgroundColor;
    console.log('Body background color:', bodyColor);
  }

  render() {
    return <div>Class component example</div>;
  }
}

动态修改`document`属性

修改document属性（如标题）时，需注意清理副作用：

import React, { useEffect } from 'react';

function PageTitle({ title }) {
  useEffect(() => {
    const originalTitle = document.title;
    document.title = title; // 修改标题

    return () => {
      document.title = originalTitle; // 恢复原始标题
    };
  }, [title]); // 依赖title变化触发更新

  return null; // 无需渲染
}

注意事项

SSR兼容性：服务端渲染（如Next.js）中document未定义，需通过typeof window !== 'undefined'判断。
性能影响：频繁直接操作DOM可能影响React的渲染优化。

事件监听：在useEffect中添加document事件监听器时，需在清理函数中移除：

useEffect(() => {
  const handleClick = () => console.log('Document clicked');
  document.addEventListener('click', handleClick);
  return () => document.removeEventListener('click', handleClick);
}, []);