如何基于最高组件动态设置一行组件的高度？

问题背景 #

三个BlogPostCard组件因文本长度不同导致高度不一致，需要先渲染卡片获取最高高度，再统一所有卡片的高度。

原代码存在的问题 #

• useEffect中调用setMaxHeight后立即执行setCardHeight(maxHeight)，但setMaxHeight是异步操作，此时maxHeight还是初始值0，无法正确设置高度。
• 未监听窗口大小变化，窗口缩放后卡片高度可能再次出现不一致。
• 卡片容器设置高度后，卡片内部元素未撑满容器，导致视觉上仍有差异。

解决方案步骤 #

1. 修正状态更新逻辑：依赖maxHeight的变化来设置卡片高度，确保获取到真实的最大高度后再更新。
2. 添加窗口resize监听：窗口尺寸变化时重新计算卡片高度，保证响应式场景下的一致性。
3. 优化卡片内部布局：让卡片内部元素撑满父容器，避免高度设置后内容未填满的问题。
4. 使用useRef替代querySelector：更精准地获取卡片元素，避免DOM选择器的潜在问题。

修改后的代码 #

页面组件代码 #

import * as React from 'react'
import { SocialIconRow } from '@/components/social-icons'
import BlogPostCard from '@/components/BlogCard'
import Image from 'next/image'
import { useState, useEffect, useRef } from 'react'

export default function MyComponent(props) {
  const [maxHeight, setMaxHeight] = useState(0);
  const cardRefs = useRef([]);

  const calculateMaxHeight = () => {
    if (cardRefs.current.length === 0) return;
    const heights = cardRefs.current.map(ref => ref?.clientHeight || 0);
    setMaxHeight(Math.max(...heights));
  };

  useEffect(() => {
    // 首次渲染后计算高度
    calculateMaxHeight();
    // 监听窗口resize事件
    window.addEventListener('resize', calculateMaxHeight);
    // 清理函数
    return () => window.removeEventListener('resize', calculateMaxHeight);
  }, []);

  // 当maxHeight更新后，确保卡片能撑满高度
  const cardContainerStyle = maxHeight ? { height: `${maxHeight}px` } : {};

  return (
    <>
      <div className="container mx-auto flex flex-col">
        <div className="container mx-auto flex">
          <div className="w-1/2 pr-4">
            <div className="text-4xl font-bold">Mike Borman</div>
            <div className="text-lg mt-2">Writer, Content Creator and Developer on Cardano</div>
          </div>
          <div className="w-1/2 flex flex-col justify-center">
            <div className="max-h-48 max-w-48 mx-auto my-auto">
              <Image
                src="/images/myfaceppgray.png"
                alt="Picture of the author"
                className="max-h-48 max-w-48"
                width="150"
                height="150"
                unoptimized={true}
              />
            </div>
            <div className="mt-4">
              <SocialIconRow className="social-icon-row" />
            </div>
          </div>
        </div>
        <div className="mt-8">
          <div className="text-3xl font-bold">Featured Blogs</div>
          <div className="grid grid-cols-3 gap-4 mt-4">
            <div style={cardContainerStyle}>
              <BlogPostCard
                title="The Hydra Protocol Family — Scaling and Network Optimization for the Cardano Blockchain"
                slug="the-hydra-protocol-family-scaling-and-network-optimization-for-the-cardano-blockchain"
                imageslug="/images/hydra.png"
                ref={(el) => (cardRefs.current[0] = el)}
              />
            </div>
            <div style={cardContainerStyle}>
              <BlogPostCard
                title="Ouroboros, A deep dive for non PhDs"
                slug="ouroboros-a-deep-dive-for-non-phd"
                imageslug="/images/ourobouros.png"
                ref={(el) => (cardRefs.current[1] = el)}
              />
            </div>
            <div style={cardContainerStyle}>
              <BlogPostCard
                title="Ouroboros, A deep dive for non PhDs"
                slug="ouroboros-a-deep-dive-for-non-phd"
                imageslug="/images/ourobouros.png"
                ref={(el) => (cardRefs.current[2] = el)}
              />
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

卡片组件代码（支持ref传递） #

import React, { forwardRef } from 'react'
import Link from 'next/link'
import Image from 'next/image'

const BlogPostCard = forwardRef((props, ref) => {
  const { title, slug, imageslug } = props

  return (
    <Link href={`/blog/${slug}`}>
      <a 
        ref={ref}
        className="block flex flex-col h-full rounded-md border-2 border-teal-400 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg"
      >
        <img className="rounded-t-md h-48 w-full object-cover" src={imageslug} alt="blog post cover" />
        <span className="text-white text-2xl p-4 flex-grow">{title}</span>
      </a>
    </Link>
  )
})

export default BlogPostCard

关键说明 #

• 使用useRef数组存储每个卡片的DOM元素，避免querySelector可能带来的选择错误。
• 窗口resize时重新计算高度，保证响应式场景下的高度一致性。
• 卡片组件通过forwardRef接收父组件传递的ref，方便获取真实DOM高度。
• 给卡片内部的文本区域添加flex-grow类，确保文本区域能撑满剩余空间，避免卡片高度统一后内容区域高度不一致。

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