在JavaScript中使用.map（）呈现列表时，如何分离元素？

我正在呈现一个包含一些香水的列表。这些香水有一些类别，一些香水有不止一个与之相关的类别

如果香水有多个类别，我想知道如何用

条

来区分类别

下图更容易解释：

在第一款香水中，它有3个类别，因此各栏将物品分开

这是我输入的代码

---

提前感谢您。

您可以使用CSS实现所需的结果

我们使用上的

：not（）

选择器，并将其与

：first child

组合，以便仅将样式应用于第一个子元素之后的元素。在这里，我们使用

：：before

psuedo元素在元素的左侧应用“|”

ul{
列表样式：无；
}
李{
显示：内联块；
} 
李：不是（：第一个孩子）：：以前{
内容：“|”；
}

产品1

第一类
第2类
第3类

产品2

第一类

在

Card.js

import React from "react";

const Card = (props) => {
  const { item } = props;

  return (
    <div>
      <span>{item.categories.join(' / ')}</span>
    </div>
  );
};

export default Card;

从“React”导入React；
康斯特卡=（道具）=>{
const{item}=props；
返回(
{item.categories.join（'/'）}
);
};
导出默认卡；

您应该在Card.js中替换以下代码

<span>{item.categories.map((category) => category)}</span>

{item.categories.map（（category）=>category）}

与

{item.categories.toString（）.replaceAll（'，'，'/'）}

使用此解决方案，您不需要映射（）阵列

--

或者，您可以使用内置的join（）函数。 在本例中，您的代码如下所示：

<span>{item.categories.join(' / ')}</span>

{item.categories.join（'/'）}

嘿，Yannick，加入

对我来说非常好。非常感谢。
<span>{item.categories.join(' / ')}</span>