react 如何判断卡片的高度
获取卡片高度的常用方法
在React中，可以通过以下几种方式获取卡片（或任意DOM元素）的高度：
使用useRef和useEffect钩子
import React, { useRef, useEffect, useState } from 'react';
function CardComponent() {
const cardRef = useRef(null);
const [height, setHeight] = useState(0);
useEffect(() => {
if (cardRef.current) {
setHeight(cardRef.current.offsetHeight);
}
}, []);
return (
<div ref={cardRef}>
{/* 卡片内容 */}
<p>卡片高度: {height}px</p>
</div>
);
}监听窗口大小变化
useEffect(() => {
const handleResize = () => {
if (cardRef.current) {
setHeight(cardRef.current.offsetHeight);
}
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);使用getBoundingClientRect获取精确尺寸
useEffect(() => {
if (cardRef.current) {
const rect = cardRef.current.getBoundingClientRect();
setHeight(rect.height);
}
}, []);动态内容高度处理
如果卡片内容是动态加载的，需要添加依赖项到useEffect：
useEffect(() => {
// 当content变化时重新计算高度
}, [content]);第三方库方案
对于复杂场景，可以考虑使用现成的React尺寸检测库：
npm install react-use-measureimport useMeasure from 'react-use-measure';
function Card() {
const [ref, bounds] = useMeasure();
return (
<div ref={ref}>
当前高度: {bounds.height}px
</div>
);
}注意事项
offsetHeight包含边框和滚动条clientHeight包含内边距但不包含边框- 获取高度操作应在组件挂载完成后进行
- 动态内容需要手动触发重新测量
