Les bons accessoires clés pour une liste d'étoiles de notation

Question

J'ai le code suivant pour rendre 5 étoiles pour un composant. Je veux qu'il soit toujours exactement 5 étoiles, mais selon le classement, le reste des étoiles devrait être vide. Je le code suivant pour atteindre cet objectif .:

const stars = [] 
for (let i = 0; i < 5; i++){ 
    if (i < Math.floor(rating)){ 
    stars.push(<span className="feedback-star full"></span>) 
    } else { 
    stars.push(<span className="feedback-star blank"></span>) 
    } 
} 

Réagir dit que je devrais avoir un accessoire clé unique pour chaque travée. Comment devrait-il y parvenir efficacement? (Je suppose que je pourrais utiliser new Date(), ou Math.random(), mais est-ce que ce ne sera pas beaucoup d'opérations inutiles sur une liste de plus de 100 feedbacks, chaque 5 étoiles?)

Answer 1

Vous avez lu sur clés dans React et comment les utiliser efficacement. Vous pourriez trouver this post utile. Fondamentalement:

React utilise la clé prop pour comprendre la relation Composant-DOM qui est ensuite utilisée pour reconciliation process. Il est donc très important que la clé reste toujours unique, sinon il y a de bonnes chances que React mélange les éléments et mate l'élément incorrect.

---

Cela dit, pour résoudre votre problème, essayez ceci:

let stars = [] 
for (let i = 0; i < 5; i++){ 
    if (i < Math.floor(rating)){ 
    stars.push(<span key={i} className="feedback-star full"></span>) 
    } else { 
    stars.push(<span key={i} className="feedback-star blank"></span>) 
    } 
} 

Pour une syntaxe plus courte, vous pouvez aussi le faire:

let stars = [] 
for (let i = 0; i < 5; i++){ 
    stars.push(<span key={i} className={"feedback-star " + (i < Math.floor(rating) ? "full" : "blank")}></span>) 
} 

Notez également que, avec const vous créez une référence en lecture seule à une variable et ne devez pas la muter. Pour ce scénario, utilisez plutôt let.