如何在 React 中将嵌套多维数组结构渲染为清晰的多级表格（含行合并）-js教程-PHP中文网

如何在 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（全局备注），为表格渲染奠定坚实基础。

react-pro

你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

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

利用

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

每行判断是否为某 no 的首项（index === 0 || item.no !== array[index - 1].no）；
若是首项，则计算该 no 出现总次数（array.filter(el => el.no === item.no).length），作为 rowSpan 值；

非首项则跳过对应渲染（留空由上一行撑开）。

完整 JSX 示例：

{sortedData.map((item, index, array) => ( {/* Participant column — only render on first occurrence */} {index === 0 || item.no !== array[index - 1].no ? ( ) : null} {/* Category column — always render */} {/* Cards column — render as bullet list for readability */} {/* Comment column — only render on first occurrence */} {index === 0 || item.no !== array[index - 1].no ? ( ) : null} ))}

Participant	Category	Cards	Comment
el.no === item.no).length} className="border px-3 py-2 font-medium"> {item.no}	{item.category}	{Array.isArray(item.cards) ? ( {item.cards.map((card, i) => ( {card} ))} ) : ( String(item.cards) )}	el.no === item.no).length} className="border px-3 py-2 text-gray-600"> {item.comment}

⚠️ 注意事项与优化建议

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），让复杂嵌套数据在表格中一目了然。