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

Question

我正在创建一个项目页面，我在其中从图像数组中为每个项目映射一个 React Bootstrap 图像轮播。这工作正常，但问题是，如果数组中只有一张图像，我希望 "next" 和 "previous" 箭头不出现。因此，我尝试在数组长度大于 1 时有条件地返回 Carousel.Item，否则返回常规图像（不在 Carousel.Item 标签内）。但是因为它仍然在 Carousel 本身内，所以它认为这是另一个 Carousel 幻灯片并且箭头出现了。我怀疑我的三元语句布局不正确，但我尝试过的所有其他配置都导致 "Unexpected Token" 错误。

<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 和 return 轮播上方，否则是静态图像。

在我看来，这通常更有意义，因为您当前正在检查每个项目迭代的数组长度。然而你真的只需要做一次。

这是更新后的代码：

{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

您可能想尝试将轮播映射功能存储在 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} 
)

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

React conditionally returning a mapped bootstrap element based on array length

ternary

conditional-statements

carousel

reactjs

react-bootstrap