如何在 React 中将嵌套多维数组结构渲染为清晰的多级表格 含行合并

本文介绍如何将具有三层嵌套关系（参与者 → 分类 → 卡片）的原始数据，规范化为扁平化对象数组，并使用 rowSpan 实现语义清晰的 React 表格渲染，确保同一参与者的多分类共享单一行号与评论。

本文介绍如何将具有三层嵌套关系（参与者 → 分类 → 卡片）的原始数据，规范化为扁平化对象数组，并使用 `rowspan` 实现语义清晰的 react 表格渲染，确保同一参与者的多分类共享单一行号与评论。

在 React 应用中处理多层级业务数据（如参与者、其下属多个分类、每个分类下若干卡片）时，直接基于深度嵌套数组渲染表格易导致结构混乱、可维护性差。最佳实践是先归一化数据结构，再声明式渲染。

✅ 推荐数据建模：扁平化 + 语义字段

原始 participant_data 是混合类型数组（字符串、嵌套数组），不利于 React 的 map 和 key 管理。应转换为统一对象数组，例如：

const sortedData = [  { no: '#1', category: 'not set #0', cards: ['card1', 'A very large title title tile1', /* ... */], comment: 'comment ' },  { no: '#1', category: 'not set #1', cards: ['A very large title title tile2', 'A very large title title tile9'], comment: 'comment ' },  { no: '#1', category: 'name1', cards: ['card1', 'A very large title title tile1', /* ... */], comment: 'comment ' },  // ... 其他条目];

该结构明确分离了四维信息：no（参与者标识）、category（分类名）、cards（卡片列表）、comment（全局备注），为表格渲染奠定坚实基础。

? 表格渲染核心逻辑：智能 rowSpan

利用 <td rowSpan> 合并同一参与者的垂直单元格，避免重复显示 participant 和 comment。关键点在于：

• 每行判断是否为某 no 的首项（index === 0 || item.no !== array[index - 1].no）；
• 若是首项，则计算该 no 出现总次数（array.filter(el => el.no === item.no).length），作为 rowSpan 值；
• 非首项则跳过对应 <td> 渲染（留空由上一行撑开）。

完整 JSX 示例：

<table className="min-w-full border-collapse">  <thead>    <tr>      <th className="border px-3 py-2">Participant</th>      <th className="border px-3 py-2">Category</th>      <th className="border px-3 py-2">Cards</th>      <th className="border px-3 py-2">Comment</th>    </tr>  </thead>  <tbody>    {sortedData.map((item, index, array) => (      <tr key={`${item.no}-${item.category}-${index}`}>        {/* Participant column — only render on first occurrence */}        {index === 0 || item.no !== array[index - 1].no ? (          <td rowSpan={array.filter(el => el.no === item.no).length} className="border px-3 py-2 font-medium">            {item.no}          </td>        ) : null}        {/* Category column — always render */}        <td className="border px-3 py-2">{item.category}</td>        {/* Cards column — render as bullet list for readability */}        <td className="border px-3 py-2">          {Array.isArray(item.cards) ? (            <ul className="list-disc list-inside m-0 p-0 text-sm">              {item.cards.map((card, i) => (                <li key={i} className="whitespace-normal break-words">{card}</li>              ))}            </ul>          ) : (            String(item.cards)          )}        </td>        {/* Comment column — only render on first occurrence */}        {index === 0 || item.no !== array[index - 1].no ? (          <td rowSpan={array.filter(el => el.no === item.no).length} className="border px-3 py-2 text-gray-600">            {item.comment}          </td>        ) : null}      </tr>    ))}  </tbody></table>

⚠️ 注意事项与优化建议

• Key 唯一性：key 必须全局唯一且稳定。推荐组合 item.no + item.category + index，避免仅用 index（易因排序/过滤失效）。
• 性能考量：array.filter(...).length 在大数据量下有 O(n²) 风险。生产环境建议预处理——用 Map 或 reduce 提前统计各 no 的频次，存为 rowSpanMap，渲染时直接查表。
• 空值防御：确保 item.cards 始终为数组（可用 Array.isArray(item.cards) ? item.cards : [item.cards] 容错）。
• 样式增强：为提升可读性，可对 category 列加背景色区分、对长卡片文本启用 word-break: break-word、添加 hover 高亮等。
• 可扩展性：若未来需支持“分类内卡片分组”或“卡片状态标签”，可在 cards 字段中嵌套对象（如 { id: 'card1', title: '...', status: 'active' }），保持结构演进弹性。

通过结构规范化 + rowSpan 精准控制，你不仅能清晰表达“谁（Participant）→ 在哪类（Category）→ 有哪些卡（Cards）”，还能自然承载上下文备注（Comment），让复杂嵌套数据在表格中一目了然。