無法讓組件顯示反應圖像？

我不斷從這個組件返回空值。我在想什麼？無法讓組件顯示反應圖像？

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

來源

2017-02-20 arcom

我相信你需要isOpen。嘗試

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

來源

2017-02-20 17:32:13

從文檔中不明顯，但反應圖像不會呈現圖像的網格/或圖庫。一旦圖像被點擊，它將只渲染燈箱組件。

所以，爲了得到你想要的東西（這是一個類似的畫廊，並且應用於該畫廊的圖像的燈箱組件，那麼你不僅需要'react-images'。例如，你可以使用普通的<img>標記渲染一個圖像數組，但是，確保每個圖像的「onClick」設置爲一個圖像，而不是其他的圖像/圖像npm庫。。打開的燈箱功能見下圖：

... 
 

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

來源

2018-03-03 05:09:22 kat

無法讓組件顯示反應圖像？

回答

相關問題