Question

当使用map函数打印出所有值时，如何在值之间添加逗号？（使用React，这就是我拥有密钥等的原因。）

ScheduleID

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

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

我应该以某种方式这样做吗？

Audi, Nissan, Mazda, Toyota

Answer 1

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

＆＃13;

/* 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: "" }

＆＃13;

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

＆＃13;

Answer 2

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

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

旁注：不需要冗长的箭头功能体（当然它可以作为样式选择）：

{ cars.map((car, index) =>
    <p key={car.id}>{car.title} {index < cars.length - 1 ? ',\u00A0' : ''}</p>)
}

实例：

＆＃13;

const cars = [
  {id: 1, title: "Ford"},
  {id: 2, title: "Toyota"},
  {id: 3, title: "Lexus"}
];

ReactDOM.render(
  <div>
        { cars.map((car, index) =>
        <p key={car.id}>{car.title}{index < cars.length - 1 ? ',\u00A0' : ''}</p>)
    }
  </div>,
  document.getElementById("root")
);

＆＃13;

/* To make the result match the question */
p { display: inline-block; }

＆＃13;

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

＆＃13;

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

2 个答案: