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-measure

import useMeasure from 'react-use-measure';

function Card() {
  const [ref, bounds] = useMeasure();

  return (
    <div ref={ref}>
      当前高度: {bounds.height}px
    </div>
  );
}

注意事项

• offsetHeight包含边框和滚动条
• clientHeight包含内边距但不包含边框
• 获取高度操作应在组件挂载完成后进行
• 动态内容需要手动触发重新测量