当前位置：首页 > React

react如何获取div的高度

2026-01-25 09:52:47React

使用 `useRef` 和 `useEffect` 获取 Div 高度

在 React 中，可以通过 useRef 钩子创建一个引用，并将其附加到目标 div 上。结合 useEffect 钩子，在组件挂载或更新后获取 div 的高度。

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

function Component() {
  const divRef = useRef(null);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    if (divRef.current) {
      setHeight(divRef.current.offsetHeight);
    }
  }, []);

  return (
    <div ref={divRef}>
      Div 的高度是：{height}px
    </div>
  );
}

监听窗口大小变化动态更新高度

如果 div 的高度可能因窗口大小变化而改变，可以监听 resize 事件动态更新高度。

useEffect(() => {
  const handleResize = () => {
    if (divRef.current) {
      setHeight(divRef.current.offsetHeight);
    }
  };

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

使用 `getBoundingClientRect` 获取精确高度

getBoundingClientRect 方法可以返回 div 的精确尺寸信息，包括高度、宽度、位置等。

useEffect(() => {
  if (divRef.current) {
    const rect = divRef.current.getBoundingClientRect();
    setHeight(rect.height);
  }
}, []);

在类组件中获取 Div 高度

如果使用类组件，可以通过 createRef 或回调 ref 的方式获取 div 的高度。

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
    this.state = { height: 0 };
  }

  componentDidMount() {
    if (this.divRef.current) {
      this.setState({ height: this.divRef.current.offsetHeight });
    }
  }

  render() {
    return (
      <div ref={this.divRef}>
        Div 的高度是：{this.state.height}px
      </div>
    );
  }
}

使用 `ResizeObserver` 监听元素尺寸变化

现代浏览器支持 ResizeObserver API，可以更高效地监听元素尺寸变化。

useEffect(() => {
  const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
      setHeight(entry.contentRect.height);
    }
  });

  if (divRef.current) {
    observer.observe(divRef.current);
  }

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

这些方法涵盖了 React 中获取 div 高度的常见场景，适用于函数组件和类组件，并能处理动态变化的情况。

react如何获取div的高度