本文详解如何在 React（或类 jsX 环境）中动态渲染具有层级结构的嵌套数组对象（如 summary → run_type），并正确生成带 rowspan 的 html 表格，确保父级字段垂直跨行、子级字段逐行对齐。
本文详解如何在 react（或类 jsx 环境）中动态渲染具有层级结构的嵌套数组对象（如 summary → run_type），并正确生成带 `rowspan` 的 html 表格，确保父级字段垂直跨行、子级字段逐行对齐。
在前端开发中，将嵌套数据（如“项目汇总”包含多个“运行类型”）渲染为语义清晰、布局准确的 HTML 表格，常需借助 rowspan 实现父级字段的纵向合并。但若直接在单个
核心问题在于：rowspan 不是“让后续行自动继承”，而是明确声明“该单元格应跨越多少行”，且必须与实际
以下为完整、可直接运行的解决方案（兼容 React / Next.js / Vite 等 JSX 环境）：
<table border="1" className="table table-bordered"> <thead> <tr> <th>Name</th> <th>Environment</th> <th>RunType</th> </tr> </thead> <tbody> {input?.summary?.map((project, projectIndex) => ( <> {project?.run_type?.map((runType, runTypeIndex) => ( <tr key={`${projectIndex}-${runTypeIndex}`}> {/* 仅在第一个 run_type 行渲染 name 并设置 rowspan */} {runTypeIndex === 0 && ( <td rowSpan={project.run_type.Length}>{project.name}</td> )} <td>{runType.environment}</td> <td>{runType.type}</td> </tr> ))} </> ))} </tbody> </table>✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- 使用双重映射：外层遍历 summary（每个项目），内层遍历 project.run_type（每个运行配置）；
- 每个 runType 对应一个
，保证表格行数与子项数量一致； - 通过 runTypeIndex === 0 判断是否为首行，仅在此处插入
，值设为 project.run_type.length（即当前项目的子项总数）； - 后续同项目的
中不再重复渲染 name 列，留空即可，由 rowspan 自动撑开视觉空间； - key 使用复合唯一标识（${projectIndex}-${runTypeIndex}），避免列表重排时 React Diff 出错。
⚠️ 注意事项：
- 若 run_type 为空数组（[]），rowSpan={0} 无效且可能报错，建议增加防御性判断：
{runTypeIndex === 0 && project.run_type.length > 0 && ( <td rowSpan={project.run_type.length}>{project.name}</td> )} - 在非 JSX 环境（如原生 JS 模板字符串），需手动拼接 HTML 字符串，并确保 rowspan 值为数字类型（非字符串）；
- CSS 中建议添加 vertical-align: middle 提升可读性，例如：
table td, table th { vertical-align: middle; padding: 8px 12px; }
此方案兼顾语义化、可维护性与浏览器兼容性，适用于任意深度为 2 的父子嵌套结构（如部门→员工、订单→商品等场景），是处理此类“一对多”表格渲染的标准实践。
- 通过 runTypeIndex === 0 判断是否为首行，仅在此处插入