[英]Reactjs iterate through object with images in carousel
我有一个带有旋转木马的模态,我已经修复了它将使用setState
通过此功能显示模态中的单击图像:
onClick={this.toggle.bind(this, i)}
toggle(id) {
this.setState({
clickedImage: id,
modal: !this.state.modal,
});
}
这是我显示图像的代码:
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
{(this.state.clickedImage !== undefined && this.state.clickedImage !== null) ?
<img className="img-fluid" src={block.gallery[this.state.clickedImage].images.thumbnail_lg} />
: null
}
</div>
<a className="left carousel-control" href="#demoCarousel" role="button" data-slide="prev">
<span className="icon-prev" aria-hidden="true" />
<span className="sr-only">Previous</span>
</a>
<a className="right carousel-control" href="#demoCarousel" role="button" data-slide="next">
<span className="icon-next" aria-hidden="true" />
<span className="sr-only">Next</span>
</a>
</div>
但是我如何循环浏览所有图像,以便在data-slide="next" & data-slide="prev"
上显示下一张图像
我考虑过像这样遍历对象:
{ block.gallery.map((item, i) => (
<div className="carousel-item">
<img src={item.images.thumbnail_lg} />
</div>
))}
而不是仅将激活的图像设置为单击的图像,而是如何以适当的方式做到这一点?
这是我自己找到的答案:
{ block.gallery.map((item, i) => (
(this.state.clickedImage !== undefined && this.state.clickedImage !== null) ?
<div key={i} className={(this.state.clickedImage === i) ? 'carousel-item active' : 'carousel-item'}>
<img className="img-fluid" src={item.images.thumbnail_lg} />
</div>
: null
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.