react如何当前组件高度
获取 React 组件高度的常用方法
使用 useRef 和 useEffect 获取 DOM 元素高度
通过 useRef 创建引用，绑定到目标组件的 ref 属性上，在 useEffect 中通过 clientHeight 或 offsetHeight 获取高度。
import React, { useRef, useEffect, useState } from 'react';
function Component() {
const ref = useRef(null);
const [height, setHeight] = useState(0);
useEffect(() => {
if (ref.current) {
setHeight(ref.current.clientHeight);
}
}, []);
return (
<div ref={ref}>
当前组件高度：{height}px
</div>
);
}监听窗口大小变化动态更新高度
结合 ResizeObserver 或窗口 resize 事件，实时更新高度值。
useEffect(() => {
const handleResize = () => {
if (ref.current) {
setHeight(ref.current.offsetHeight);
}
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);使用 getBoundingClientRect() 获取精确尺寸
此方法返回包含高度、宽度、位置等完整信息的对象。
useEffect(() => {
if (ref.current) {
const rect = ref.current.getBoundingClientRect();
console.log('高度:', rect.height);
}
}, []);注意事项
clientHeight包含内边距但不包含边框和外边距。offsetHeight包含内边距、边框和滚动条（如果有）。- 如果组件内容动态变化，需在依赖数组中添加相关状态以触发重新计算。
