如何设置react-grid-layout的rowHeight以显示卡片全部内容？

数据老陈

2026-8-6

解决方案

1. 修复卡片内容的显示逻辑

首先要解决的是卡片内容隐藏的问题：你的Card组件大概率存在仅当摘要行数达到最大值时才显示内容的判断逻辑，导致摘要行数不足时隐藏了所有非标题内容。需要修改Card组件，确保只要有内容就渲染，同时限制最大行数：

假设你的Card组件内部有类似这样的错误代码：

// 错误示例：仅当行数达到最大值时显示
{summaryLines >= MAX_SUMMARY_LINES && (
  <div className="summary">{summary}</div>
)}
{descriptionLines >= MAX_DESCRIPTION_LINES && (
  <div className="description">{description}</div>
)}

修改为以下逻辑：

// 正确逻辑：有内容就渲染，同时限制最大行数
{issue.summary && (
  <div 
    className="summary" 
    style={{
      display: '-webkit-box',
      WebkitLineClamp: summaryNumberOfLines,
      WebkitBoxOrient: 'vertical',
      overflow: 'hidden',
    }}
  >
    {issue.summary}
  </div>
)}
{issue.description && (
  <div 
    className="description"
    style={{
      display: '-webkit-box',
      WebkitLineClamp: descriptionNumberOfLines,
      WebkitBoxOrient: 'vertical',
      overflow: 'hidden',
    }}
  >
    {issue.description}
  </div>
)}

这样无论摘要行数多少，只要存在内容就会显示，并且自动截断到设置的最大行数。

2. 让react-grid-layout适配卡片动态高度

react-grid-layout依赖layout数组中每个项的h属性分配行高，固定的rowHeight无法适配内容高度变化的卡片。我们需要实时测量卡片高度并更新布局：

步骤1：添加卡片引用与状态管理

在父组件中创建引用存储每个卡片元素，并维护动态布局状态：

import { useRef, useEffect, useState } from 'react';

// 存储每个卡片的DOM引用
const cardRefs = useRef({});
// 维护动态更新的布局
const [dynamicLayout, setDynamicLayout] = useState(newLayout);

步骤2：实时测量卡片高度并更新布局

使用useEffect在内容变化时测量卡片高度，计算所需行数并更新布局：

useEffect(() => {
  const updatedLayout = [...dynamicLayout];
  const rowHeight = 30; // 设置统一的基础行高
  
  updatedLayout.forEach(item => {
    const cardEl = cardRefs.current[item.i];
    if (cardEl && !item.isLoading) {
      // 计算卡片实际高度需要的行数
      const requiredRows = Math.ceil(cardEl.offsetHeight / rowHeight);
      // 仅当行数值变化时更新，避免不必要的重渲染
      if (item.h !== requiredRows) {
        item.h = requiredRows;
      }
    } else if (item.isLoading) {
      // 加载状态下设置固定行高，防止布局跳动
      item.h = MAX_SUMMARY_LINES + 2; // 根据实际加载占位高度调整
    }
  });
  
  setDynamicLayout(updatedLayout);
}, [newLayout, MAX_SUMMARY_LINES, MAX_DESCRIPTION_LINES, showAssignee, showReporter]);

步骤3：更新GridLayout与卡片引用

将动态布局传入GridLayout，并为每个卡片容器添加引用：

<GridLayout
  className="layout"
  style={{ backgroundColor: colors.N20 }}
  layout={dynamicLayout}
  width={cols * 300 + (cols - 1) * 10}
  cols={cols}
  isResizable={false}
  rowHeight={30}
  onDragStop={(_, __, item) => someFunc(item)}
>
  {dynamicLayout.map((item) => (
    <div 
      key={item.i} 
      ref={el => cardRefs.current[item.i] = el}
      // 可选：添加内边距避免内容贴边
      style={{ padding: '8px' }}
    >
      <Card
        summaryNumberOfLines={MAX_SUMMARY_LINES}
        descriptionNumberOfLines={MAX_DESCRIPTION_LINES}
        issue={item.issue}
        isLoading={item.isLoading}
        showAssignee={showAssignee}
        showReporter={showReporter}
      />
    </div>
  ))}
</GridLayout>

3. 额外注意事项

确保Card组件没有设置固定高度，让它由内容自然撑开
加载状态下设置固定行高，避免布局频繁跳动
如果卡片内容会动态变化（比如异步加载完成），需要将相关状态加入useEffect的依赖数组

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