javascript - Reactjs 画廊 block

Question

我想根据数组中设置的图像数量创建一个图像 block 。喜欢这个画廊 block :

[![在此处输入图像描述][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]

先别提样式。

但是现在它向我显示了第一张图片的两次，如何从数组的第二个开始绘制 map ？并且仅将带有 +X 照片的跨度仅放置在最后一张照片上？

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