当前位置 博文首页 > lllomh的博客：react-image-gallery幻灯组件跟react-image-light
这2个单独各自的实例，前面几篇都有详细记录。
react-image-gallery:https://blog.csdn.net/lllomh/article/details/103958205
react-image-lightbox :https://blog.csdn.net/lllomh/article/details/103896313
这里记录配置幻灯片定位灯箱的配置问题! 就是滑到哪个幻灯片，点击该幻灯图片就出现灯箱，并且从该图片开始展示
在react-image-gallery中利用onSlide来获取creeIndex值
creeIndex=(index)=>{
console.log(index)//每次幻灯变动会有值
this.props.getCurrentIndexsVal(index)
} render() {
let {imgs} = this.props;
const settings = {
lazyLoad: true,
showFullscreenButton:false,
showPlayButton:false
};
return <ImageGallery {...settings} onClick={this.showImg} items={imgs} onSlide={this.creeIndex} />;
}在?react-image-lightbox 中 把 这里的原来的photoIndex 换成上面变动获取的creeIndex值.这里变动改变的值又传回自己，我推荐用redux比较方便,当然也可以用子组件父组件传值的方式!
getBanner=(q)=>{// 点击切换图片事件 q 是change的 index值
console.log(q,'valvbalssss')
this.props.getCurrentIndexsVal(q)
};
