Reactjs galleryblock

Question

Я хотел бы создать блок изображения в зависимости от того, сколько изображений будет установлено в массиве. Как эта галерея блока: [! [Введите описание изображения здесь] [1]]

[1]

Я попытался это:

<div className="gallery clearfix"> 
    <div className="gallery-image"> 
     <img src={block.gallery[0].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[0].images.thumbnail_md} 1x, ${block.gallery[0].images.thumbnail_lg} 2x`} className="img-fluid" /> 
    </div> 
    <div className="gallery-thumbs"> 
     <div className="row"> 
     {block.gallery.map((item, i) => (
      <div className="gallery-item" key={i}> 
      { block.gallery.length > 4 ? 
       <div className="inner"> 
       <img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" /> 
       <div className="img-overlay"> 
        <span className="img-overlay-body">{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span></span> 
       </div> 
       </div> 
       : 
       <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" /> 
      } 
      </div> 
     ))} 
     </div> 
    </div> 
    </div> 

Это результат, как это выглядит: [ ! [введите описание изображения здесь] [2]] [2]

Не упоминайте о дизайне.

Но теперь это показывает мне два раза первый рисунок, как мне начать карту со второго массива? И только место span с + X Photo только на последней фотографии?

Answer 1

Для первого вопроса, то я хотел бы заменить:

{ block.gallery.length > 4 ? /* existing code */ 
: <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" /> 

по:

{ block.gallery.length > ? 
    i > 0 ? /* existing code */ : null 
: <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" /> 

Для второго,

{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span> 

по

const remain = block.gallery.length - 4; //before return 
<span className="img-overlay-body">{ i === block.gallery.length ? remain + <span className="hidden-xs">Foto's</span> : null }</span> 

Так что в конечном итоге это будет:

const remain = block.gallery.length - 4; 
    return (
    <div className="gallery clearfix"> 
     <div className="gallery-image"> 
      <img src={block.gallery[0].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[0].images.thumbnail_md} 1x, ${block.gallery[0].images.thumbnail_lg} 2x`} className="img-fluid" /> 
     </div> 
     <div className="gallery-thumbs"> 
      <div className="row"> 
      {block.gallery.map((item, i) => (
       <div className="gallery-item" key={i}> 
       { block.gallery.length > 4 ? 
        i > 0 ? 
        <div className="inner"> 
        <img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" /> : null 
        <div className="img-overlay"> 
        <span className="img-overlay-body">{ i === block.gallery.length ? remain + <span className="hidden-xs">Foto's</span> : null }</span> 
        </div> 
        </div> 
        : 
        <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" /> 
       } 
       </div> 
      ))} 
      </div> 
     </div> 
     </div>);