React中如何动态调整卡片高度，实现无固定高度下所有卡片等高？

针对你用Ant Design Grid布局时卡片高度不一致的问题，以下是几种实用的解决方法，按推荐优先级排序：

方案1：纯CSS实现（推荐） #

利用Flexbox布局特性，让列容器撑满高度，再让卡片填充整个列空间，无需额外JS逻辑。

步骤1：添加自定义CSS #

/* 可以放在全局样式文件或组件内的style标签中 */
.card-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-col .ant-card {
  flex: 1;
  /* 如果需要让卡片内容区在内容过多时滚动，可添加以下样式 */
  display: flex;
  flex-direction: column;
}

.card-col .ant-card-body {
  flex: 1;
  overflow-y: auto;
}

步骤2：修改JSX代码 #

给Col添加自定义类名，让布局生效：

<Row>
  {data.map((item) => (
    <Col 
      xs={12} sm={12} md={6} lg={4} xl={3} xxl={3} 
      className="mb-4 card-col"
    >
      <Card>
        {item.content}
      </Card>
    </Col>
  ))}
</Row>

原理：Col被设置为flex垂直布局并占满100%高度，同一行的Col会自动对齐到最高元素的高度；Card设置flex:1后，会填充Col的所有可用空间，实现等高效果。

方案2：内联样式简化版 #

如果不想写额外CSS，可以直接用内联样式实现相同效果：

<Row>
  {data.map((item) => (
    <Col 
      xs={12} sm={12} md={6} lg={4} xl={3} xxl={3} 
      className="mb-4"
      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
    >
      <Card style={{ flex: 1 }}>
        {item.content}
      </Card>
    </Col>
  ))}
</Row>

方案3：JavaScript动态计算（特殊场景备用） #

如果CSS方案因特殊布局限制无法使用，可以通过JS动态计算并设置最大高度：

import { useEffect, useRef } from 'react';

// 组件内部逻辑
const cardRefs = useRef([]);

useEffect(() => {
  if (cardRefs.current.length === 0) return;

  // 获取所有卡片的高度，计算最大值
  const heights = cardRefs.current.map(ref => ref.offsetHeight);
  const maxHeight = Math.max(...heights);

  // 给所有卡片设置最大高度
  cardRefs.current.forEach(ref => {
    ref.style.height = `${maxHeight}px`;
  });

  // 监听窗口 resize，重新计算高度
  const handleResize = () => {
    const newHeights = cardRefs.current.map(ref => ref.scrollHeight);
    const newMaxHeight = Math.max(...newHeights);
    cardRefs.current.forEach(ref => {
      ref.style.height = `${newMaxHeight}px`;
    });
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, [data]); // 数据变化时重新计算

// 渲染部分
<Row>
  {data.map((item, index) => (
    <Col xs={12} sm={12} md={6} lg={4} xl={3} xxl={3} className="mb-4">
      <Card ref={el => cardRefs.current[index] = el}>
        {item.content}
      </Card>
    </Col>
  ))}
</Row>

内容的提问来源于stack exchange，提问作者Mazumder