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

Question

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

const folders = ["文件夹 1", "文件夹 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>

它在每个文件夹之后都放置了那个箭头图标，但我不希望它在最后一个文件夹之后放置那个箭头。我该如何解决？

Answer 1

与 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>

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