なぜリアクショングリッドギャラリーで画像が2回表示されるのですか？

Question

私はreact-grid-galleryを使ってイメージギャラリーを作成しようとしています。 サンプルコードを使用して、ページ上の何かをすばやく取得しました。しかし、タグには何も表示されません。または画像にdivを追加するとギャラリーが2回表示されます。それは動作しますが、明らかに全体的に非常に良く見えません。

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') 
) 

Answer 1

私は別のIMGタグを使用して問題を回避することができたし、それにSRC = {this.IMAGESを与えます} prop。もし私がこれを言っていなければ、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> 
) 

}}