当前位置：首页 > React

react如何获取页面高度

2026-01-24 17:05:37React

获取页面高度的方法

在React中，可以通过多种方式获取页面高度，以下是几种常见的方法：

使用window对象

通过window.innerHeight可以获取浏览器窗口的视口高度，包括滚动条。document.documentElement.scrollHeight可以获取整个文档的高度。

const pageHeight = document.documentElement.scrollHeight;
const viewportHeight = window.innerHeight;

使用React Hook

react如何获取页面高度

在函数组件中，可以使用useEffect和useState来动态获取和更新页面高度。

import { useState, useEffect } from 'react';

function usePageHeight() {
  const [pageHeight, setPageHeight] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      setPageHeight(document.documentElement.scrollHeight);
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return pageHeight;
}

使用ref获取元素高度

react如何获取页面高度

如果需要获取特定元素的高度，可以使用ref来获取DOM节点并计算其高度。

import { useRef, useEffect } from 'react';

function Component() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const height = ref.current.clientHeight;
      console.log(height);
    }
  }, []);

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

响应式高度更新

在页面内容动态变化时，可以通过监听resize事件或使用MutationObserver来实时更新高度。

useEffect(() => {
  const observer = new MutationObserver(() => {
    setPageHeight(document.documentElement.scrollHeight);
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });

  return () => observer.disconnect();
}, []);

以上方法可以根据具体需求选择使用，适用于不同的场景和组件类型。