React/Next.js中如何为轮播图首个幻灯片条件添加active类

方案一：依赖数据项的id判断（适用于第一个项id确定为1的场景） #

你当前的条件判断逻辑是可行的，只需把这段代码放到map循环中即可，完整示例如下：

{posts.map((post) => (
  <div 
    key={post.id}
    className={`carousel-item ${post.id === 1 ? 'active' : ''}`}
  >
    <img src="img/blog-slider.png" className="d-block w-100" alt={post.title} />
    <div className="carousel-caption d-md-block">
      <h5>{post.title}</h5>
      <p>{post.content}</p>
    </div>
  </div>
))}

方案二：依赖map循环的索引判断（更通用的场景） #

如果数据的id不一定从1开始，或者第一个项的id不确定是1，推荐使用map的第二个参数index来判断——索引从0开始，第一个元素的索引必然是0，能更稳妥地命中第一个幻灯片：

{posts.map((post, index) => (
  <div 
    key={post.id}
    className={`carousel-item ${index === 0 ? 'active' : ''}`}
  >
    <img src="img/blog-slider.png" className="d-block w-100" alt={post.title} />
    <div className="carousel-caption d-md-block">
      <h5>{post.title}</h5>
      <p>{post.content}</p>
    </div>
  </div>
))}

注意：React列表渲染时必须给每个循环项添加唯一的key属性，这里使用post.id作为key是合理的选择。

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