如何在 React 中把嵌套多维数组结构渲染成清晰的分组表格

本文介绍如何将具有参与者、分类、卡片和备注四层语义的嵌套数组数据，重构为扁平化对象数组，并使用 rowSpan 实现跨行合并的响应式表格，确保每个卡片归属关系一目了然。

本文介绍如何将具有参与者、分类、卡片和备注四层语义的嵌套数组数据，重构为扁平化对象数组，并使用 `rowspan` 实现跨行合并的响应式表格，确保每个卡片归属关系一目了然。

在 React 中渲染多层级嵌套数据（如“参与者 → 分类 → 卡片”）为表格时，直接遍历原始嵌套数组易导致结构混乱、语义丢失。最佳实践是先规范化数据结构，再按语义驱动渲染。

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

原始 participant_data 是混合类型嵌套数组（含字符串、二维数组、三层数组），不利于维护与扩展。应转换为统一的对象数组，例如：

const normalizedData = [  { 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 ' },  // ... 其他条目];

可通过递归或 flatMap 轻松完成转换：

const normalizeParticipantData = (data) => {  const [participantId, categories, comment] = data;  return categories.flatMap(([categoryName, cards]) => ({    no: participantId,    category: categoryName,    cards,    comment: comment.trim()  }));};const sortedData = normalizeParticipantData(participant_data).sort((a, b) => a.no.localeCompare(b.no));

? 渲染逻辑：用 rowSpan 实现跨行分组

关键在于：同一参与者的多行共享 participant 和 comment 列。React 表格需动态计算 rowSpan 值：

<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 once per group */}        {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 pl-5 m-0 space-y-0.5 text-sm">              {item.cards.map((card, i) => (                <li key={i} className="whitespace-normal break-words">{card}</li>              ))}            </ul>          ) : (            String(item.cards)          )}        </td>        {/* Comment column: same logic as Participant */}        {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 必须唯一且稳定：避免仅用 index，推荐组合 item.no + item.category + index，防止重排错乱；
• rowSpan 安全性：确保数据已排序（按 no 分组连续），否则 array[index - 1].no 判断失效；
• 性能优化：若数据量大（>100 行），可预计算分组映射（如 groupMap = { '#1': 12 }），避免每次 filter；
• 无障碍支持：为 <table> 添加 aria-label，为 rowSpan 单元格补充 role="rowheader" 提升读屏体验；
• 样式增强：用 CSS :has() 或父级 class 区分首行/非首行，实现分组底色渐变或边框强调。

通过结构规范化 + 语义化渲染，你不仅能清晰表达“谁（Participant）在哪个分类（Category）下拥有哪些卡片（Cards）”，还能灵活支持排序、搜索、导出等后续功能，真正让复杂嵌套数据“一表读懂”。