如何为Props中每3个仪表盘条目包裹row类div？

问题背景 #

需要在首页用Bootstrap卡片展示仪表盘组件，要求每3个卡片被一个带row类的div包裹。原本计划通过数据库ID取模实现分组，但ID被删除后会导致分组逻辑混乱。同时也考虑过用单个row包裹所有组件，但需要解决卡片堆叠的边距问题。

方案一：按数组索引分组生成row #

不依赖数据库ID，直接通过数组索引将仪表盘列表拆分为每3个一组的子数组，再为每组渲染一个row容器，完全避免ID变动带来的问题。

修改首页的Index组件代码：

const Index: React.FC<Props> = (props) => {
  const { data: session, status } = useSession()

  if (status === "loading") {
    return (
      <Spinner />
    )
  }

  if (!session) {
    return (
      <Layout>
        <AccessDenied />
      </Layout>
    )
  }

  // 将仪表盘数组按每3个一组拆分
  const groupedDashboards = [];
  for (let i = 0; i < props.dashboards.length; i += 3) {
    groupedDashboards.push(props.dashboards.slice(i, i + 3));
  }

  return (
    <Layout>
      <h1>Dashboards</h1>
      {groupedDashboards.map((group, groupIndex) => (
        <div key={groupIndex} className="row mb-4">
          {/* mb-4 为每行添加底部间距，避免行与行之间过于紧凑 */}
          {group.map((dashboard) => (
            <Dashboard key={dashboard.id} dashboard={dashboard} />
          ))}
        </div>
      ))}
    </Layout>
  )
}

说明：

• 用循环+slice方法拆分数组，保证每3个元素为一组
• 每组外层包裹row类，并通过mb-4添加底部间距
• 分别使用groupIndex和dashboard.id作为key，保证React渲染的唯一性

方案二：单个row包裹所有卡片并自动处理间距 #

如果不需要严格的每3个一组的row结构，可以直接用单个row包裹所有仪表盘组件，借助Bootstrap的 gutter 类自动处理卡片间距，同时在移动端添加卡片底部间距避免堆叠。

步骤1：修改首页的容器结构

return (
  <Layout>
    <h1>Dashboards</h1>
    <div className="row g-4">
      {/* g-4 为列之间添加水平和垂直方向的间距 */}
      {props.dashboards.map((dashboard) => (
        <Dashboard key={dashboard.id} dashboard={dashboard} />
      ))}
    </div>
  </Layout>
)

步骤2：给Dashboard组件的卡片添加移动端间距

修改Dashboard组件的卡片div：

<div className="card bg-light h-100 mb-3">
  {/* mb-3 在小屏幕下为卡片添加底部间距 */}
  <div className="card-header">
    {dashboard.title}
  </div>
  {/* 其余代码不变 */}
</div>

说明：

• Bootstrap的row g-4类会自动为列（col）添加均匀的内外间距，无需手动分组
• mb-3保证在小屏幕（col-sm-12）下，卡片垂直方向不会紧贴
• 这种方案代码更简洁，响应式表现更自然

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