在 JavaScript 中使用 .map() 呈现列表时如何分隔元素？

Question

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

我想知道bar如果香水有多个类别，如何用 a 分隔类别？

使用下图更容易解释：

在第一款香水中，它有 3 个类别，所以条形图将项目分开。

这是我放入codesandbox的代码

先感谢您。

Answer 1

您应该在 Card.js 中替换以下代码<span>{item.categories.map((category)&nbsp;=>&nbsp;category)}</span>和<span>{item.categories.toString().replaceAll(',',&nbsp;'&nbsp;/&nbsp;')}</span>使用此解决方案，您不需要map()您的数组。--或者，您可以使用内置的join()函数。在这种情况下，您的代码如下所示：<span>{item.categories.join('&nbsp;/&nbsp;')}</span>

Answer 2

您可以使用 CSS 来获得所需的结果。我们使用:not()选择器 on 并将其与 结合使用，:first-child以便仅将我们的样式应用于第一个元素之后的元素。从那里我们使用::before伪元素来应用“|” 在元素的左侧。ul {&nbsp; list-style: none;}li {&nbsp; display: inline-block;}&nbsp;li:not(:first-child)::before {&nbsp; content: "|";}<h2>Product 1</h2><ul><li> Cat 1 </li><li> Cat 2 </li><li> Cat 3 </li></ul><h2>Product 2</h2><ul><li> Cat 1 </li></ul>

Answer 3

使用Array.join()而不是映射Card.jsimport React from "react";const Card = (props) => {&nbsp; const { item } = props;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <span>{item.categories.join(' / ')}</span>&nbsp; &nbsp; </div>&nbsp; );};export default Card;