如何在Bootstrap Carousel中映射Games数组并仅保持一项为active状态？

你只需要在遍历games数组时，仅给第一个轮播项添加active类，其他项去掉这个类即可——Bootstrap的轮播组件要求只有一个carousel-item处于激活状态才能正常工作。

修改后的核心代码：

<div className="carousel-inner">
  {games.map((game, index) => (
    <div 
      key={game.name} 
      className={`carousel-item ${index === 0 ? 'active' : ''}`}
    >
      <img src={game.image} className="d-block w-50" alt={game.name} />
      <div className="carousel-caption">
        <h2>{game.name}</h2>
        <p>{game.rating}</p>
      </div>
    </div>
  ))}
</div>

额外提示： #

• 这里利用了map方法的第二个参数index，判断当前项是否为数组的第一个元素（索引为0），是的话就追加active类，否则不添加。
• 为了让轮播能正常切换，记得补全Bootstrap Carousel的完整结构，比如左右切换按钮：

<div id="gameCarousel" className="carousel slide" data-bs-ride="carousel">
  <div className="carousel-inner">
    {/* 上面的轮播项代码 */}
  </div>
  <button className="carousel-control-prev" type="button" data-bs-target="#gameCarousel" data-bs-slide="prev">
    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
    <span className="visually-hidden">上一张</span>
  </button>
  <button className="carousel-control-next" type="button" data-bs-target="#gameCarousel" data-bs-slide="next">
    <span className="carousel-control-next-icon" aria-hidden="true"></span>
    <span className="visually-hidden">下一张</span>
  </button>
</div>

• 如果games数组可能为空，建议添加空状态判断，避免渲染错误：

{games.length > 0 ? (
  <div className="carousel-inner">
    {/* 轮播项代码 */}
  </div>
) : (
  <p>加载中或暂无游戏数据</p>
)}

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