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]

まだスタイリングは言及していません。

しかし、それは私に2回目の写真を表示します。どのようにして2番目の配列からマップを開始できますか？最後の写真にのみ+ 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="" /> 

1秒間

、

{ 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>);