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

Question

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

<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 包裹的事实。

Answer 2

您可能想尝试将 Carousel 映射功能存储在 const 外部，然后检查长度以有条件地更改其值，然后注入值 {images}。

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

const default = (<div className='project-image'>
    <img src={ imgUrl} style={{width: "80%"}}alt={title.rendered}/>
  </div>)

const images = imageArray.length > 1 ? carousel : default 


return (
{images} 
)