图像阵列上的灯箱

Question

我正在尝试制作保存在本地文件夹中的图片库，因此我使用array.map 渲染它们。这完美地工作。 但我坚持在这些图像上输入灯箱。我使用lightbox-react 包并进行了一些更改，但它不起作用。

这是我的尝试：

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import Lightbox from 'lightbox-react';
import AddPhoto from './addPhoto';

//lazy-loading images
import ObserverWrapper from '@emarketeross/simple-react-intersection-observer';

class ArchitectureGallery extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
            photoIndex: 0
        }
    }

    render() {
        const { photoIndex, isOpen } = this.state;

        //map through all images in folder
        let names = ['1','2','3','4','5','6', ].map( (name, index) => {
            return <img
                key={index}
                className="img-responsive"
                alt=""
                src={require(`../../assets/images/architecture/${name}.jpeg`)}
                onClick={() => this.setState({ isOpen: true})}
                />
        } );
        return (
            <div className="img-container">
                <Grid className="container">
                    <ObserverWrapper>
                    <Row>
                        <Col className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            { names }

                            {isOpen && (
                              <Lightbox
                                mainSrc={{names}[photoIndex]}
                                nextSrc={{names}[(photoIndex + 1)] % names.length}
                                prevSrc={{names}[(photoIndex + names.length - 1) % names.length]}
                                onCloseRequest={() => this.setState({ isOpen: false })}
                                onMovePrevRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + names.length - 1) % names.length
                                    })
                                }
                                onMoveNextRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + 1) % names.length
                                    })
                                }
                                />
                            )}
                        </Col>
                    </Row>
                    </ObserverWrapper>
                </Grid>
            </div>
        );
    }
}

export default ArchitectureGallery;

我认为问题在于定义灯箱属性，控制台显示Failed prop type: The prop mainSrc is marked as required in ReactImageLightbox, but its value is undefined.

任何帮助将不胜感激。

Answer 1

它不适合你的原因是因为你使用了两个大括号 {{}} 而不是像 {}

尝试以下更改

改变

<Lightbox
                                mainSrc={{names}[photoIndex]}
                                nextSrc={{names}[(photoIndex + 1)] % names.length}
                                prevSrc={{names}[(photoIndex + names.length - 1) % names.length]}
                                onCloseRequest={() => this.setState({ isOpen: false })}
                                onMovePrevRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + names.length - 1) % names.length
                                    })
                                }
                                onMoveNextRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + 1) % names.length
                                    })
                                }
                                />

到

<Lightbox
                                mainSrc={names[photoIndex]}
                                nextSrc={names[(photoIndex + 1)] % names.length}
                                prevSrc={names[(photoIndex + names.length - 1) % names.length]}
                                onCloseRequest={() => this.setState({ isOpen: false })}
                                onMovePrevRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + names.length - 1) % names.length
                                    })
                                }
                                onMoveNextRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + 1) % names.length
                                    })
                                }
                                />