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

Question

我正在创建一个项目页面，在那里我从一组图像中为每个项目映射一个React Bootstrap图像旋转木马。这很好，但问题是，如果阵列中只有一个图像，我希望"下一个"one_answers"上一个"箭头不要出现。因此，当数组长度大于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

如果数组长于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-imagediv的样式，以适应它不再由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} 
)