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。
