React.js中HTML表格嵌套行渲染异常的解决方案咨询

要实现最后两列的嵌套行效果，核心是利用HTML表格的rowspan属性，让前两列的单元格跨越对应子项的行数，同时最后两列的每个子项单独占一行。以下是具体实现方案：

1. 定义数据结构 #

先整理好包含主项和嵌套子项的数据，比如：

const tableData = [
  {
    col1: "主条目A",
    col2: "主描述A",
    nestedRows: [
      { col3: "子条目A1", col4: "子描述A1" },
      { col3: "子条目A2", col4: "子描述A2" }
    ]
  },
  {
    col1: "主条目B",
    col2: "主描述B",
    nestedRows: [
      { col3: "子条目B1", col4: "子描述B1" },
      { col3: "子条目B2", col4: "子描述B2" },
      { col3: "子条目B3", col4: "子描述B3" }
    ]
  }
];

2. React组件实现 #

通过rowspan控制单元格跨行，配合条件渲染实现嵌套效果：

function NestedTable() {
  return (
    <table border="1" cellPadding="8" cellSpacing="0">
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
          <th>列4</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map((mainItem, mainIdx) => {
          const childCount = mainItem.nestedRows.length;
          // 遍历每个子项生成行
          return mainItem.nestedRows.map((childItem, childIdx) => (
            <tr key={`main-${mainIdx}-child-${childIdx}`}>
              {/* 只有第一个子项渲染前两列，且设置跨行 */}
              {childIdx === 0 && (
                <>
                  <td rowSpan={childCount}>{mainItem.col1}</td>
                  <td rowSpan={childCount}>{mainItem.col2}</td>
                </>
              )}
              <td>{childItem.col3}</td>
              <td>{childItem.col4}</td>
            </tr>
          ));
        })}
      </tbody>
    </table>
  );
}

export default NestedTable;

关键说明 #

• rowspan={childCount}：让前两列的单元格跨越当前主项的所有子项行，视觉上形成"嵌套"的效果。
• 条件渲染：仅在第一个子项中渲染前两列，避免重复单元格导致表格结构错乱。
• 唯一key：用主项索引+子项索引生成唯一key，符合React列表渲染的要求。

如果需要更复杂的嵌套（比如在单元格内嵌入完整表格），可以在目标<td>中直接嵌套<table>元素，但这种方式语义性不如跨行方案，仅适合特殊场景。

内容的提问来源于stack exchange，提问作者Ven Nilson