reactjs - 防止标题重复

Question

我一直在搞乱一些条件渲染方法，但是我似乎找不到一种有效的方法。

<div className="tags">
  {adv_event.types.map(type => (
    <div className="tag" key={type.tid}>
      <h5 className="body-color">Event Type:</h5>
      <Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
    </div>
  ))}
</div>

现在<h5 className="body-color">Event Type:</h5>对每个标签重复。有没有办法在每个标签之前显示一次标题而不添加它？

标签： reactjsgatsby

Answer 1

将其移出循环？

<div className="tags">
  {adv_event.types.length > 0 ? (<h5 className="body-color">Event Type:</h5>) : ''}
  {adv_event.types.map(type => (
    <div className="tag" key={type.tid}>
      <Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
    </div>
  ))}
</div>