如何在Bootstrap Table中使用嵌套map函数？代码构建失败求助

你遇到的错误核心原因是JSX语法规则限制：React要求每个渲染函数/表达式必须返回单个根元素，不能直接返回多个同级元素。你的代码中，每个section的map回调里，先返回了一个<tr>，紧接着又返回了section.items.map生成的多个<tr>，这相当于返回了多个同级元素，违反了JSX的语法要求，导致模块构建失败。

修正后的代码 #

使用React的**Fragment（短语法<>...</>）**包裹每个section对应的所有行，确保每个map迭代返回的是单个根元素：

<tbody>
  {ListItems.map((section) => (
    <>
      <tr key={section.id}>
        <td>{section.name}</td>
      </tr>
      {section.items.map((item) => (
        <tr key={item.id}>
          <td>{item.productName}</td>
        </tr>
      ))}
    </>
  ))}
</tbody>

补充说明 #

• 如果你的React版本不支持短语法<>...</>，可以用完整的<React.Fragment>替代：

  <React.Fragment>
    {/* 内容同上述短语法 */}
  </React.Fragment>
  

• Fragment不会在DOM中生成额外的节点，只会作为逻辑容器包裹元素，完全符合Bootstrap Table的结构要求。

内容的提问来源于stack exchange，提问作者kishore kumar