我有三个组件，叫做blog卡片，用图片和文本呈现。根据文本的长度，卡片有不同的高度。我想呈现它们，然后得到最高的一个，再重新呈现它们，这样它们都是相同的高度。
这里是页面

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

import { FixedSizeList } from 'react-window'

function BlogPostCardsList({ cards }) {
  const tallestCardHeight = useMemo(() => {
    return Math.max(...cards.map(card => card.height))
  }, [cards])

  return (
    <FixedSizeList
      itemCount={cards.length}
      itemSize={tallestCardHeight}
      width={'100%'}
      height={'100%'}
    >
      {({ index, style }) => <BlogPostCard style={style} {...cards[index]} />}
    </FixedSizeList>
  )
}

export default function MyComponent(props) {
  const [cardHeight, setCardHeight] = useState(null);
const [maxHeight, setMaxHeight] = useState(0);

useEffect(() => {
    const calculateHeight = () => {
        const cards = document.querySelectorAll('.blog-post-card');
        let heights = [];
        cards.forEach(card => {
            heights.push(card.clientHeight);
        });
        setMaxHeight(Math.max(...heights));
    }
    calculateHeight();
    setCardHeight(maxHeight);
}, []);

  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 h-full mt-4 align-items-stretch">
      <div  style={{height: cardHeight}}>
        <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"
          className="blog-post-card"
        />
      </div>
      <div style={{height: cardHeight}}>
        <BlogPostCard
          title="Ouroboros, A deep dive for non PhDs"
          slug="ouroboros-a-deep-dive-for-non-phd"
          imageslug="/images/ourobouros.png"
          className="blog-post-card"
        />
      </div>
      <div className="h-full row-auto" style={{height: cardHeight}}>
        <BlogPostCard
          title="Ouroboros, A deep dive for non PhDs"
          slug="ouroboros-a-deep-dive-for-non-phd"
          imageslug="/images/ourobouros.png"
          className="blog-post-card"
        />
      </div>
  </div>
</div>
</div>
      
      
    </>
  )
}

下面是卡组件：

import React from 'react'
import Link from 'next/link'
import Image from 'next/image'

function BlogPostCard(props) {
  const { title, slug, imageslug } = props

  return (
    <Link href={`/blog/${slug}`}>
    <a className="block flex flex-col justify-between 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">{title}</span>
    </a>
  </Link>
  )
}

export default BlogPostCard

我试着动态渲染它们，然后设置它们，顺便说一句，我真的不知道我在那里做什么。