react 灯箱组件 react-image-lightbox 的使用

记得要安装配套的 react-modal 组件才行,就是这个demo里面的package.json文件的 react-modal 也记得安装!

demo 请狠狠的戳这里 ¥ http://download.lllomh.com/cliect/#/product/J417060554145183

demo 请狠狠的戳这里 c https://download.csdn.net/download/lllomh/12092889

 

实际中使用

import React, {Component} from "react"
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import './index.scss';
import ShoppingDetails from "../shoppingDetails";
import store from "../../redux/store";
import {connect} from "react-redux";

const mapStateToProps = state => {
    // console.log(state, 123)
    return {
        count: state.counter.count,
        hello: state.counter.hello,
        isOpen: state.counter.isOpen,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        getSshow: (lo) => { //定义 方法操作
            dispatch({type: 'getSshow', value:lo})

        }
    }
}


class Lightboxs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgArr:[],
            photoIndex:[]
        }

    }

    getImg = (val)=>{
        let arr = [];
        for(let i in val){
            arr.push(val[i].original)
        }
        this.setState((prevState, props) => ({
            imgArr: arr
        }));
    }

    getBanner=(q)=>{// 子组件的点击事件
        this.props.changeData(q) // 这个changeData()就是激活父组件的方法，可以传值
    };

    componentDidMount(){
        this.getImg(this.props.imgs)
    }


    render() {
        const {photoIndex} = this.props;
        console.log(this.props)

        return (
            <div>
                <div className={`lightboxs`}>
                    {this.props.isOpen && (
                        <Lightbox
                            mainSrc={this.state.imgArr[photoIndex]}
                            nextSrc={this.state.imgArr[(photoIndex + 1) % this.state.imgArr.length]}
                            prevSrc={this.state.imgArr[(photoIndex + this.state.imgArr.length - 1) % this.state.imgArr.length]}
                            onCloseRequest={() =>this.props.getSshow(false)}
                            onMovePrevRequest={() =>
                                this.getBanner(
                                     (photoIndex + this.state.imgArr.length - 1) % this.state.imgArr.length
                                )
                            }
                            onMoveNextRequest={() =>
                                this.getBanner(
                                    (photoIndex + 1) % this.state.imgArr.length,
                                )
                            }
                        />
                    )}
                </div>
            </div>
        );
    }
}
export default connect(
    mapStateToProps,      //读取redux 的值 用到redux 的组件 用connect 链接才会更新
    mapDispatchToProps
)(Lightboxs)

效果:

最后 点开之后的初始大小在这里改: