Question

我一直在搞弄一些conditional rendering方法，但是，我似乎找不到合适的方法。

<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>。有没有一种方法可以显示标题一次而无需在每个标签之前添加标题？

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>

防止标题重复

1 个答案: