React-Bootstrap实现轮播图单幻灯片显示3个卡片的方法

首先你需要先把recipes数组按每3个元素为一组拆分，之后再通过嵌套map来渲染每组对应的轮播项和卡片。

1. 编写数组分组工具函数 #

先定义一个函数把原数组拆分成指定大小的子数组：

const chunkArray = (arr, chunkSize) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    chunks.push(arr.slice(i, i + chunkSize));
  }
  return chunks;
};

2. 修改轮播组件的渲染逻辑 #

在组件中先对recipes进行分组，再嵌套map渲染：

<div>
  <Wrapper>
    <h3>Breakfast Recipes</h3>
    <Carousel>
      {/* 先把数组按每组3个拆分 */}
      {chunkArray(recipes, 3).map((group, groupIndex) => (
        <Carousel.Item key={groupIndex}>
          {/* 用flex布局让卡片横向排列 */}
          <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
            {group.map((item, itemIndex) => (
              <Card key={itemIndex} style={{ width: '18rem' }}>
                <Card.Img variant="top" src={item.photo_location} />
                <Card.Body>
                  <Card.Title>{item.name}</Card.Title>
                  <Button variant="primary">Go somewhere</Button>
                </Card.Body>
              </Card>
            ))}
          </div>
        </Carousel.Item>
      ))}
    </Carousel>
  </Wrapper>
</div>

关键说明 #

• 分组函数chunkArray会把原数组拆分成多个长度为3的子数组，每个子数组对应一张轮播幻灯片的内容。
• 外层map遍历分组后的数组，每个分组对应一个Carousel.Item；内层map遍历当前分组里的食谱数据，渲染对应卡片。
• 外层的div添加了flex布局样式，确保同一幻灯片里的卡片横向排列，gap用来控制卡片间距，flexWrap保证在屏幕较小时卡片自动换行，避免溢出。
• 如果想更贴合React-Bootstrap的布局规范，也可以用Container+Row+Col组件替代自定义flex样式，比如给每个Card套上<Col xs={12} sm={6} md={4}>，这样响应式布局更方便。

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