Reactjs 画廊块

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]

先不提造型。

但是现在它向我显示了第一张图片的两次我如何从数组的第二张开始制作地图？并且仅将带有 +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>);

Reactjs 画廊块

Reactjs galleryblock

javascript

twitter-bootstrap

reactjs

react-jsx