如何在地图功能中先跳过

时间:2016-11-18 14:32:51

标签: javascript reactjs

我想跳过.map函数中的第一个,我现在做的是:

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.slice(1).forEach((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>
);

如您所见,我在第一个img标记中显示了第一张图片,但它也会在.map函数中显示为第一张图片,因此我获得了重复的图片。如何跳过.map函数中的第一张图片?

2 个答案:

答案 0 :(得分:16)

所以slice跳过第一个

block.gallery.slice(1).map(...)

您还需要引用传递给map的项,而不是使用带有orginal数组的索引。

block.gallery[i].images.thumbnail_sm

应该是

item.images.thumbnail_sm

答案 1 :(得分:0)

您还可以删除第一个元素,并使用Array.prototype.shift()随时检索它。但是,这会修改原始数组。

$ awk -v RS="\r\n" '/> \\box.=/,/^$/'` file