React JSX 中最后一次循环迭代的条件？

Question

我有一个电子邮件列表，我需要循环浏览并以这种格式显示。

  renderEmaillist() {
    return this.props.OfficeEmailAddress.map((officeEmail) => {
        return (
          <a key={emailID} href={`mailto:${officeEmail}`}>{officeEmail}{'; '}</a>
          );
    });
}

当它呈现

 email@mail.com; email2@mail.com;

我只想删除最后一个循环末尾的分号。

这样做的赌注是什么？

Answer 1

您可以从内部访问索引和完整数组map：

return this.props.OfficeEmailAddress.map((officeEmail, index, arr) => {
  return (
    <a key={emailID} href={`mailto:${officeEmail}`}>
      {officeEmail}{index === arr.length - 1 ? '' : '; '}
    </a>
  );
});

我添加了一个三元组来确定我们是否在数组的最后一个元素上，如果是，则只输出一个空字符串。