React JS 按示例图映射数据实现日期维度主模块为表头的表格渲染问题

你代码的核心问题是不符合HTML表格的语法规范，才会触发运行报错，具体错误点和修复方案如下：

错误原因 #

• HTML规范要求单个表格只能存在一个<thead>标签，且<thead>仅可放置表头行内容，你给每个主模块都单独套了<thead>，还把属于主体内容的子模块行也放在<thead>里，属于语法错误。
• 你用flex布局包裹多个<thead>实现分列的思路不符合table的标准用法，也会导致布局和渲染异常。

修复实现逻辑 #

要实现你需要的「主模块作为列表头，子模块挂载到对应主模块下」的表格结构，按以下逻辑实现即可：

1. 先统计所有预定义主模块下已完成子模块的最大数量，再统计自定义模块的总数量，取两者的最大值作为表格主体的总行数。
2. 所有主模块表头统一放在同一个<thead>的同一行内，最后追加自定义模块表头。
3. 遍历总行数生成表格行，每一行依次从每个主模块的已完成子模块列表中取对应下标的子模块名称，无对应内容则填空值；最后一列取对应下标的自定义模块名称，无对应内容则填空值。

修复后核心代码示例 #

// 先计算表格需要的总行数
const maxSubLength = Math.max(...predefined.map(item => item.submodule.filter(e => e.completed).length), custom.length)
// 预提取所有已过滤的子模块列表
const filteredPredefined = predefined.map(item => ({
  ...item,
  validSub: item.submodule.filter(e => e.completed)
}))

return (
  <table style={styles.table}>
    {/* 统一表头 */}
    <thead>
      <tr>
      {filteredPredefined.map(item => (
      <th style={styles.th} key={item.mainModule}>{item.mainModule}</th>
      ))}
      <th style={styles.th}>自定义模块</th>
      </tr>
    </thead>
    {/* 表格主体 */}
    <tbody>
      {Array.from({length: maxSubLength}).map((_, rowIndex) => (
        <tr key={rowIndex}>
          {filteredPredefined.map(item => (
            <td style={styles.td} key={item.mainModule}>
              {item.validSub[rowIndex]?.subModuleName || ''}
            </td>
          ))}
          <td style={styles.td}>{custom[rowIndex]?.name || ''}</td>
        </tr>
      ))}
    </tbody>
  </table>
)

配套基础样式补充 #

const styles = {
  table: {
    borderCollapse: 'collapse',
    width: '100%'
  },
  th: {
    border: '1px solid #ccc',
    padding: '8px',
    backgroundColor: '#f5f5f5'
  },
  td: {
    border: '1px solid #ccc',
    padding: '8px'
  }
}

内容的提问来源于stack exchange，提问作者vivek kn