react-image-gallery幻灯组件跟react-image-lightbox灯箱组件结合记录

这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)
    };