Question

我正在构建一个带有React / Redux的图像灯箱，其设计实现与this非常相似。

基本上在ImageGrid和Lightbox组件中，我有：

ImageGrid.jsx

render() { 
  ...
  IMAGES.map((image, index) => {
    <Image onClick={() => this.props.openLightbox(index)} />
  })
  {this.props.showLightbox && <Lightbox images={IMAGES} />}
}

Lightbox.jsx

render() {
  <div>
    <img src={this.props.images[this.props.lightbox.index]} />
  </div>
}

这是代码的一个非常简化的版本，但它应该说明实现的重要部分。要实现下一个/上一个照片功能是微不足道的，我只需要更改当前的照片索引。但是，对于我的Lightbox，我希望能够使用滑动动画导航到下一张/上一张照片。

例如，如果我单击“下一步”，则当前照片应向左滑动，新照片将从右侧滑入。

我的一个想法是将Lightbox渲染为所有图像的旋转木马，然后简单地在上一个/下一个上translate旋转木马。但是，如果图像数量非常大，我不想这样做。

我的直觉是使用React.cloneElement创建上一张或下一张照片，然后为它们设置动画，但是我在React生态系统中如何解决这个问题时遇到了问题。特别是因为目前render的{{1}}函数只有一个Lightbox

React Image Lightbox在导航时带有滑动动画

0 个答案: