爲什麼react-grid-gallery顯示我的圖像兩次？

我正在嘗試使用react-grid-gallery創建圖庫。我使用了示例代碼來快速獲取頁面上的內容。然而，標籤不顯示任何內容，或者如果我添加一個div與我的圖像，然後顯示一個畫廊兩次。它的工作原理，但它總體上看起來不太好。爲什麼react-grid-gallery顯示我的圖像兩次？

import React from 'react' 
import { NavLink } from 'react-router-dom' 
let brand = 'app/images/brand.png' 

import { render } from 'react-dom' 
import Gallery from 'react-grid-gallery' 

let gallery1 = 'app/images/gallery1.jpg' 
let gallery2 = 'app/images/gallery2.jpg' 
let gallery3 = 'app/images/gallery3.jpg' 
let gallery4 = 'app/images/gallery4.jpg' 
let gallery5 = 'app/images/gallery5.jpg' 
let gallery6 = 'app/images/gallery6.jpg' 

const IMAGES = 
[ 
{ 
    src: 'app/images/gallery1.jpg', 
    thumbnail: 'app/images/gallery1.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery2.jpg', 
    thumbnail: 'app/images/gallery2.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery3.jpg', 
    thumbnail: 'app/images/gallery3.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery4.jpg', 
    thumbnail: 'app/images/gallery4.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery5.jpg', 
    thumbnail: 'app/images/gallery5.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 



export class GalleryCarousel extends React.Component { 

render() { 
return (

    <div className='home-container'> 

    <NavLink to='/' style={{marginTop: 80}}> 
     <img src={brand} alt={'img for brand'} /> 
    </NavLink> 

    <div className=''> 
     <div className='tile' ><img src={gallery1} alt=''/></div> 
     <div className='tile' ><img src={gallery2} alt=''/></div> 
     <div className='tile' ><img src={gallery3} alt=''/></div> 
     <div className='tile' ><img src={gallery4} alt=''/></div> 
     <div className='tile' ><img src={gallery5} alt=''/></div> 
     <div className='tile' ><img src={gallery6} alt=''/></div> 

     <Gallery images={IMAGES} backdropClosesModal={true}/> 
    </div> 
    </div> 
)

}}

//index.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import {Nav} from './Nav' 
import {Home} from './Home' 
import {About} from './About' 
import {Press} from './Press' 
import {GalleryCarousel} from './Gallery' 
import {Contact} from './Contact' 
import {Footer} from './Footer' 
let ReactRouter = require('react-router-dom') 
let Router = ReactRouter.BrowserRouter; 
let Route = ReactRouter.Route 
let Switch = ReactRouter.Switch 
import './index.css' 




class App extends React.Component { 

    render() { 
    return (
     <Router> 
     <div className='container'> 
      <Nav /> 

    <Switch> 
     <Route exact path='/' component={Home} /> 
     <Route path='/about' component={About} /> 
     <Route path='/press' component={Press} /> 
     <Route path='/gallery' component={GalleryCarousel} /> 
     <Route path='/contact' component={Contact} /> 
     <Route render={function() { 
     return <h1 style={{ paddingTop: 80 }}>Page Not Found.</h1> 
     }} /> 
    </Switch> 
    <Footer 
     scrollStepInPx='50' 
     delay='16.66' 
    /> 
    </div> 
    </Router> 
) 
    } 
    } 

    ReactDOM.render(
    <App />, 
    document.getElementById('app') 
)

來源

2017-08-05 OsoGrizz

我不認爲你需要在圖庫上方''

等，你只是平鋪圖像。 – Win

這也是我最初的想法，但是當我刪除這些div> img時，畫廊不顯示任何內容。例如，如果我將其設置爲isOpen = {true}，燈箱仍然存在。 – OsoGrizz

您的代碼在DOM中創建元素的位置在哪裏？您的問題可能實際存在，而不是組件。 –

我能夠通過使用一個單獨的img標籤，給它一個src = {this.IMAGES解決問題}道具。如果我不這樣說。圖片alt道具始終可見。沒有任何CSS會讓它消失。

export class GalleryCarousel extends React.Component { 

render() { 
    return (

    <div className='home-container'> 

    <NavLink to='/' style={{marginTop: 80}}> 
     <img src={brand} alt={'img for brand'} /> 
    </NavLink> 

    <div> 
     <img src={this.IMAGES} /> 
     <Gallery images={IMAGES} backdropClosesModal={true} /> 
    </div> 

    </div> 
)

}}

來源

2017-08-06 00:41:12 OsoGrizz

爲什麼react-grid-gallery顯示我的圖像兩次？

回答

相關問題