如何在数组项之间添加逗号？

Question

当使用map函数打印出所有值时,如何在值之间添加逗号？(使用React,这就是为什么我有钥匙等)

{ cars.map(car => {
    return(
      <p key={car.id}>{car.title} ,</p>
    );
}); }

这就是我想要的结果,在最后一个数组项的末尾没有逗号:

Audi, Nissan, Mazda, Toyota

我应该这样做吗？

{ cars.map((car, index) => {
  const separator = ", ";
  if(index === car.length - 1) {
     return(
       <p key={car.id}>{car.title} + separator </p>
     );
  }
}); 
}

Answer 1

map通过使用传递的 index 参数，您可以知道对的回调的哪个调用是最后一次调用：

{cars.map((car, index) => {
    return(
        <p key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</p>
    );
})}

但请注意，这p通常是一个块元素，因此汽车将被堆叠而不是内联显示，它们之间有空格（和逗号）。我会使用span，而不是（尽管你可以标记p为inline如果你想）。span下面我用过。

您还可以使用简洁的箭头函数，而不是带有函数体的冗长的箭头函数：

{cars.map((car, index) =>
    <span key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</span>
)}

现场示例：

{cars.map((car, index) => {
    return(
        <p key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</p>
    );
})}

{cars.map((car, index) =>
    <span key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</span>
)}

在评论的地方你问如何使非打破空间（虽然我认为这可能是因为你使用inline-block了p元素，所以正常的空间没有被渲染）。要做到这一点，只需", "用",\u00A0"上面的替换即可。

const cars = [
    {id: 1, title: "Ford"},
    {id: 2, title: "Toyota"},
    {id: 3, title: "Lexus"},
];

ReactDOM.render(
    <div>{cars.map((car, index) =>
        <span key={car.id}>{car.title}{index < cars.length - 1 ? ", " : ""}</span>)
    }</div>,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

而不是使您的标记复杂化并在段落之间添加TextNode,如何使用CSS.它并不总是必须是代码.

/* just making the paragraphs inline */
div > p { display: inline-block; }

/* appending the commas */
div > p:after { content: ", " }

/* removing it for the last index */
div > p:last-of-type:after { content: "" }

<div>
  <p>Audi</p>
  <p>Nissan</p>
  <p>Mazda</p>
  <p>Toyota</p>
</div>

<div>
  <p>Audi</p>
  <p>Nissan</p>
  <p>Mazda</p>
  <p>Toyota</p>
</div>