Reactjs 使用轮播中的图像遍历对象

Question

我有一个模态框，里面有一个轮播，我已经修复了它会在模态框中显示点击的图像，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>
))}

而不仅仅是将活动设置为点击的图像，但我该如何以正确的方式做到这一点？

Answer 1

这是我自己找到的答案：

{ 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
    ))}