Comment puis-je ajouter une virgule entre les valeurs lorsque j'utilise la fonction de carte pour imprimer toutes les valeurs? (En utilisant React, c'est pourquoi j'ai la clé, etc.)
{ cars.map(car => {
return(
<p key={car.id}>{car.title} ,</p>
);
}); }
Voici comment je voudrais que le résultat soit, sans virgule à la fin du dernier élément du tableau:
Audi, Nissan, Mazda, Toyota
Dois-je le faire comme ça?
{ cars.map((car, index) => {
const separator = ", ";
if(index === car.length - 1) {
return(
<p key={car.id}>{car.title} + separator </p>
);
}
});
}
Vous pouvez savoir quel appel de maprappel de est le dernier en utilisant l'argument d'index que vous avez passé:
{ cars.map((car, index) => {
return(
<p key={car.id}>{car.title} {index < cars.length - 1 ',\u00A0' : ''}</p>
);
}); }
Note latérale: pas besoin du corps de la fonction de flèche verbeuse (bien que bien sûr, il convient comme choix de style):
{ cars.map((car, index) =>
<p key={car.id}>{car.title} {index < cars.length - 1 ? ',\u00A0' : ''}</p>)
}
Exemple en direct:
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")
);/* To make the result match the question */
p { display: inline-block; }<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>Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots