本文详解如何在 React（或类 JSX 环境）中动态渲染具有层级结构的嵌套数组对象（如 summary → run_type），并正确生成带 rowspan 的 HTML 表格，确保父级字段垂直跨行、子级字段逐行对齐。
本文详解如何在 react（或类 jsx 环境）中动态渲染具有层级结构的嵌套数组对象（如 summary → run_type），并正确生成带 `rowspan` 的 html 表格，确保父级字段垂直跨行、子级字段逐行对齐。
在前端开发中，将嵌套数据（如“项目汇总”包含多个“运行类型”）渲染为语义清晰、布局准确的 HTML 表格，常需借助 rowspan 实现父级字段的纵向合并。但若直接在单个
核心问题在于：rowspan 不是“让后续行自动继承”，而是明确声明“该单元格应跨越多少行”，且必须与实际 以下为完整、可直接运行的解决方案（兼容 React / Next.js / Vite 等 JSX 环境）： ✅ 关键要点说明： 立即学习“前端免费学习笔记（深入）”； ⚠️ 注意事项： 此方案兼顾语义化、可维护性与浏览器兼容性，适用于任意深度为 2 的父子嵌套结构（如部门→员工、订单→商品等场景），是处理此类“一对多”表格渲染的标准实践。 数量严格匹配。因此，正确的策略是：按子项（run_type）逐行生成 ，并在首行渲染带 rowspan 的父字段，其余行跳过该列。
<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>
，保证表格行数与子项数量一致；
，值设为 project.run_type.length（即当前项目的子项总数）；
中不再重复渲染 name 列，留空即可，由 rowspan 自动撑开视觉空间；
{runTypeIndex === 0 && project.run_type.length > 0 && (
<td rowSpan={project.run_type.length}>{project.name}</td>
)}table td, table th { vertical-align: middle; padding: 8px 12px; }
