[英]How to add comma between array items?
使用 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>
);
}
});
}
通過使用傳遞的 index 參數,您可以知道對map
的回調的哪個調用是最后一次調用:
{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>
)}
現場示例:
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>
在某處的評論中,您詢問了如何使空間不間斷(盡管我認為這可能是因為您使用inline-block
帶有p
元素的inline-block
,因此沒有呈現正常的空間)。 為此,只需將上面的", "
替換為",\ "
。
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>
與其使標記復雜化並在段落之間添加 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.