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

Question

我正在呈现一个包含一些香水的列表。这些香水有一些类别，有些香水有不止一个与之相关的类别。我想知道bar如果香水有多个类别，如何用 a 分隔类别？使用下图更容易解释：在第一款香水中，它有 3 个类别，所以条形图将项目分开。这是我放入codesandbox的代码先感谢您。

Answer 1

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

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

和

<span>{item.categories.toString().replaceAll(',', ' / ')}</span>

使用此解决方案，您不需要map()您的数组。

--

或者，您可以使用内置的join()函数。在这种情况下，您的代码如下所示：

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

Answer 2

您可以使用 CSS 来获得所需的结果。

我们使用:not()选择器 on 并将其与 结合使用，:first-child以便仅将我们的样式应用于第一个元素之后的元素。从那里我们使用::before伪元素来应用“|” 在元素的左侧。

ul {

  list-style: none;

}

li {

  display: inline-block;

} 

li:not(:first-child)::before {

  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.js

import React from "react";

const Card = (props) => {

  const { item } = props;

  return (

    <div>

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

    </div>

  );

};

export default Card;