根据数组长度有条件地返回映射的引导程序元素

Question

我正在创建一个项目页面，在该页面中，我从图像数组映射每个项目的React Bootstrap图像轮播。那很好，但是问题是，如果数组中只有一个图像，我希望“下一个”和“上一个”箭头不出现。因此，我尝试在数组长度大于1时有条件地返回Carousel.Item，否则返回常规图像（不在Carousel.Item标记内）。但是，由于它仍位于“轮播”中，因此它认为这是另一个“轮播”幻灯片，并且出现了箭头。我怀疑三元语句的布局不正确，但是我尝试过的所有其他配置都导致了“意外令牌”错误。

<Carousel>
  {imageArray.map((image, id) => { 
    return imageArray.length > 1 ?

  <Carousel.Item key={image.id}>
    <div className='project-image'>
      <img src={ image} style={{width: "80%"}} alt={title.rendered}/>
    </div>
  </Carousel.Item>
  
  :
  
  <div className='project-image'>
    <img src={ imgUrl} style={{width: "80%"}}alt={title.rendered}/>
  </div>
  })}
</Carousel>

Answer 1

如果您的数组长于一个，则可以将三元运算符移到Carousel上方，并返回轮播，否则返回静态图像。

我认为总体上讲更有意义，因为您当前正在检查每次迭代的数组长度。但是，您实际上只需要执行一次。

这里是更新的代码：

{imageArray.length > 1 ?
  <Carousel>
     {imageArray.map((image, id) => (     
       <Carousel.Item key={image.id}>
         <div className='project-image'>
           <img src={ image} style={{width: "80%"}} alt={title.rendered}/>
         </div>
       </Carousel.Item>
     ))}
   </Carousel>
  :
  <div className='project-image'>
    <img src={ imgUrl} style={{width: "80%"}}alt={title.rendered}/>
  </div>
}

您可能需要稍微更改.project-image div的样式以适应不再由Carousel包裹的事实。