时间戳

首页 > 解决方案 > 如何删除最后一个数组映射的分隔符图标？

javascript - 如何删除最后一个数组映射的分隔符图标？

问题描述

我有一个字符串数组，我想以一种一个接一个的方式呈现它们，中间的箭头作为分隔符。

const folders = ["Folder 1", "Folder 2"]

所以我尝试了以下代码：

<div style={{display: "flex"}}>
   {folders.map(folder => (
     <p><i className='fa fa-folder'></i> {folder} <i className="fa fa-chevron-right"></i></p>
   ))}
</div>

这是做什么的，它把那个箭头图标放在每个文件夹之后，但我不希望它把那个箭头放在最后一个文件夹之后。我该如何解决？

标签： javascriptreactjs

解决方案

使用Array.prototype.map您可以访问正在执行映射的数组的项目索引

<div style={{display: "flex"}}>
    {folders.map((folder, index) => {
        return (
            <p key={index}>
                <i className='fa fa-folder'></i> 
                {folder} 
                {index !== folders.length - 1 ? <i className="fa fa-chevron-right"></i>: null}
            </p>
         )
        );
    })}
</div>

如您所见，我添加了一行检查地图中的当前索引是否等于 的长度，folders如果不是，则显示关闭的 V 形，否则不显示。

推荐阅读