如何让每3个卡片项返回相同高度值以实现卡片行对齐？

需求背景 #

需要让每行最多包含3个的卡片保持行内高度统一，实现卡片内图片对齐效果——即同一行的3个卡片高度完全一致，不同行可根据内容有不同高度，但本行内所有卡片高度统一。

现有问题 #

当前的handleHeadline函数是针对单个卡片计算高度，无法保证同一行的多个卡片返回相同的高度值，导致行内卡片高度参差不齐，图片无法对齐。

修改方案 #

核心思路：按行计算最大高度，再将统一高度传递给该行所有卡片。

步骤1：修改行渲染逻辑，计算每行最大高度 #

在遍历rows渲染每行时，先计算当前行所有卡片中标题的最大行数（lineBreaks），再基于这个最大值生成统一的高度，传递给该行的每个卡片。

{rows.slice(0, rowCount || rows.length).map((row, i) => {
  // 计算当前行标题的最大行数
  let maxLineBreaks = 0;
  // 需提前创建二维ref数组存储每行卡片的标题元素ref
  row.forEach((card, idx) => {
    const headlineEl = cardHeadlineRefs.current[i]?.[idx];
    if (headlineEl) {
      const lineHeight = parseInt(headlineEl.style.lineHeight, 10);
      const lineBreaks = headlineEl.offsetHeight / lineHeight;
      maxLineBreaks = Math.max(maxLineBreaks, lineBreaks);
    }
  });

  // 根据最大行数获取统一高度
  const getRowHeadlineHeight = (breaks) => {
    switch (breaks) {
      case 1: return '40px';
      case 2: return '60px';
      case 3: return '80px';
      case 4: return '100px';
      default: return '';
    }
  };
  const unifiedHeight = getRowHeadlineHeight(maxLineBreaks);

  return (
    <OuterContainer key={`row-${i}`}>
      <Container>
        {row.map((card: OpenGraphCardProp, idx: number) =>
          (card?.headline || card?.image) && (
            <OpenGraphCard
              id={card.id || idx + 1}
              headline={card.headline}
              image={card.image}
              subline={card.subline}
              name={card.name}
              link={card.link}
              key={`card-${card.id}-${idx}`}
              linkText={card.linkText}
              baseUrl={baseUrl}
              unifiedHeadlineHeight={unifiedHeight} {/* 传递统一高度 */}
            />
          )
        )}
      </Container>
      {i < rows.length - 1 && (
        <DividerContainer>
          <Divider />
        </DividerContainer>
      )}
    </OuterContainer>
  );
})}

步骤2：调整卡片组件，接收并使用统一高度 #

修改OpenGraphCard组件，直接使用传入的统一高度替代原有单个卡片的高度计算：

const OpenGraphCard = ({ unifiedHeadlineHeight, ...props }) => {
  // 将当前卡片的标题ref存入对应行的ref集合
  const headlineRef = useRef(null);
  useEffect(() => {
    // 假设cardHeadlineRefs是父组件传递的二维ref数组，rowIdx和cardIdx需从父组件传入
    if (!cardHeadlineRefs.current[rowIdx]) cardHeadlineRefs.current[rowIdx] = [];
    cardHeadlineRefs.current[rowIdx][cardIdx] = headlineRef.current;
  }, []);

  return (
    <div className="open-graph-card">
      {/* 将标题容器高度设置为统一值 */}
      <div 
        className="card-headline" 
        ref={headlineRef}
        style={{ height: unifiedHeadlineHeight }}
      >
        {props.headline}
      </div>
      {/* 图片区域 */}
      <div className="card-image">
        <img src={props.image} alt={props.headline} />
      </div>
      {/* 其他卡片内容 */}
    </div>
  );
};

关键注意事项 #

1. Ref集合管理：创建二维ref数组（cardHeadlineRefs = useRef([])），在渲染卡片时将每个标题元素的ref存入对应行和索引的位置，确保能正确获取每行所有标题的DOM元素。
2. 避免不必要的重渲染：不要在key中使用uuidv4()，改用固定标识（如行索引+卡片ID），防止组件频繁销毁重建。
3. SSR兼容：如果是服务端渲染，需要提前根据标题内容计算行数（比如通过字符串长度、字体大小预估），避免客户端与服务端的高度差异导致布局偏移。

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