在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>
      );
});

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