本文介绍如何将具有参与者、分类、卡片和备注四层语义的嵌套数组数据，重构为扁平化对象数组，并使用 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 值：
| Participant | Category | Cards | Comment |
|---|---|---|---|
| el.no === item.no).length} className="border px-3 py-2 font-medium"> {item.no} | ) : null} {/* Category column: always render */}{item.category} | {/* Cards column: render as bullet list for readability */}
{Array.isArray(item.cards) ? (
|
{/* Comment column: same logic as Participant */}
{index === 0 || item.no !== array[index - 1].no ? (
el.no === item.no).length} className="border px-3 py-2 text-gray-600"> {item.comment} | ) : null}
⚠️ 注意事项与优化建议
- key 必须唯一且稳定：避免仅用 index，推荐组合 item.no + item.category + index，防止重排错乱；
- rowSpan 安全性：确保数据已排序（按 no 分组连续），否则 array[index - 1].no 判断失效；
- 性能优化：若数据量大（>100 行），可预计算分组映射（如 groupMap = { '#1': 12 }），避免每次 filter；
-
无障碍支持：为
添加 aria-label，为 rowSpan 单元格补充 role="rowheader" 提升读屏体验；
- 样式增强：用 CSS :has() 或父级 class 区分首行/非首行，实现分组底色渐变或边框强调。
通过结构规范化 + 语义化渲染，你不仅能清晰表达“谁（Participant）在哪个分类（Category）下拥有哪些卡片（Cards）”，还能灵活支持排序、搜索、导出等后续功能，真正让复杂嵌套数据“一表读懂”。
