Question

我一直从这个组件返回null。我错过了什么???

import React from 'react';
import Lightbox from 'react-images';


const IMAGES = [
    { src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" },
    { src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg" },
    { src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg" }
];


class ImagesRow extends React.Component {
    constructor(props){
        super(props);
        this.onClose = this.onClose.bind(this);
        this.gotoNext = this.gotoNext.bind(this);
        this.gotoPrevious = this.gotoPrevious.bind(this);
    }
    onClose(){

    }
    gotoNext(){

    }
    gotoPrevious(){

    }
    render(){

        return (
            <Lightbox 
                images={IMAGES}
                onClose={this.onClose}
                    onClickPrev={this.gotoPrevious}
                    onClickNext={this.gotoNext}
            />  
        );
    }
}

这导致空div。我是否缺少必需的道具？

http://jossmac.github.io/react-images/#getting-started

Answer 1

从文档中可以看出，但反应图像不会渲染图像的网格/图库。它只会在单击图像后呈现Lightbox组件。

所以，为了得到你想要的东西（这是某种类型的画廊，并且灯箱组件应用于该画廊的图像，那么你需要的不仅仅是'反应图像'。你可以渲染图像他们自己，或与另一个画廊/网格npm库。

例如，您可以使用正常的<img>标记渲染图像数组。但是，请确保每个图像都将“onClick”设置为打开灯箱的功能。见下文：

...

 <Grid imagesArray={thumbs} onClick={this.openLightbox.bind(this)} columns={3} padding={3} />
<Lightbox
	images={images}
	isOpen={this.state.lightboxIsOpen}
	onClickPrev={this.gotoPrevious}
	onClickNext={this.gotoNext}
	onClose={this.closeLightbox}
	currentImage={this.state.currentImage}
/>

Answer 2

我相信你需要isOpen。试试

  return (
        <Lightbox 
            isOpen
            images={IMAGES}
            onClose={this.onClose}
                onClickPrev={this.gotoPrevious}
                onClickNext={this.gotoNext}
        />  
    );

无法让组件显示反应图像？

2 个答案: