react如何获取div的实际高度

获取 div 实际高度的方法

在 React 中获取 div 的实际高度可以通过以下几种方式实现：

使用 useRef 和 useEffect 钩子

通过 useRef 创建一个 ref 并将其附加到目标 div 上，然后在 useEffect 中获取其高度：

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

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

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

  return (
    <div ref={divRef}>
      This div's height is: {height}px
    </div>
  );
}

使用 ResizeObserver 监听尺寸变化

如果需要实时获取 div 高度变化，可以使用 ResizeObserver：

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

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

  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();
    };
  }, []);

  return (
    <div ref={divRef}>
      This div's height is: {height}px
    </div>
  );
}

使用 getBoundingClientRect

通过 getBoundingClientRect 方法可以获取更精确的尺寸信息：

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

注意事项

• 在组件挂载后立即获取高度可能不准确，因为 DOM 可能还未完全渲染。可以在 useEffect 中添加依赖项或使用 setTimeout 延迟获取。
• 如果 div 的内容会动态变化，需要重新计算高度。
• 使用 ResizeObserver 时要注意浏览器兼容性，可能需要 polyfill。