Javascript 反应灯箱图像

我如何拥有它，当我点击一个图像时，它会打开带有我刚刚点击的当前图像的lightbox？现在，如果我单击第二个图像标记，它总是显示lightbox中的第一张图片，而不是我刚才单击的图像。 这就是我试图使用的：

导出默认类主扩展组件{
构造函数（）{
超级（）；
此.state={
lightboxIsOpen：错，
当前图像：0，
}
this.closeLightbox=this.closeLightbox.bind（this）；
this.gotoNext=this.gotoNext.bind（this）；
this.gotoPrevious=this.gotoPrevious.bind（this）；
}
openLightbox（索引、事件）{
event.preventDefault（）；
这是我的国家({
当前图像：索引，
是的，
});
}
封闭灯箱（）{
这是我的国家({
当前图像：0，
lightboxIsOpen：错，
});
}
gotoPrevious（）{
这是我的国家({
currentImage:this.state.currentImage-1，
});
}
gotoNext（）{
这是我的国家({
currentImage:this.state.currentImage+1，
});
}
gotoImage（索引）{
这是我的国家({
当前图像：索引，
});
}
handleClickImage（）{
if（this.state.currentImage===this.props.images.length-1）返回；
this.gotoNext（）；
}
renderGallery（）{
const{images}=this.props；
如果（！images）返回；
const gallery=images.filter（i=>i.useForDemo.map）（（obj，i）=>{
返回(
);
});
} 
render（）{
常数{
感光指数，
lightboxIsOpen，
当前图像，
}=本州；
返回(
this.setState（{lightboxIsOpen:true}）}/>
{lightboxIsOpen&&
}
this.setState（{lightboxIsOpen:true}）}/>
)
}
}

在这种情况下，您需要使用

react lightbox组件

库，而不是

react image lightbox

装置

npm install react-lightbox-component

示例代码

import Lightbox from 'react-lightbox-component';

const App = () => (
  <div>
    <Lightbox images={
      [
        {
          src: 'some image url',
          title: 'image title',
          description: 'image description'
        }
      ]
    }/>
  </div>
);

从'react Lightbox component'导入Lightbox；
常量应用=（）=>(
);

---

您应该使用映射功能

const imgs = [
    "//docs.google.com/uc?id=0B0huBtqYaof7WVNjMjNMZTY3UDg", 
    "//docs.google.com/uc?id=0B0huBtqYaof7c0dpVFdGbGl0MWs"
]
const i;
imgs.map((entry, index) => i=index );
//then update your cunstructor
 constructor(props) {
        super(props);

        this.state = {
            photoIndex:i,
            isOpen: false
        };
    }

const imgs = [
    "//docs.google.com/uc?id=0B0huBtqYaof7WVNjMjNMZTY3UDg", 
    "//docs.google.com/uc?id=0B0huBtqYaof7c0dpVFdGbGl0MWs"
]
const i;
imgs.map((entry, index) => i=index );
//then update your cunstructor
 constructor(props) {
        super(props);

        this.state = {
            photoIndex:i,
            isOpen: false
        };
    }