등급 별 목록을위한 좋은 키 소품

Question

구성 요소에 별 5 개를 렌더링하려면 다음 코드가 필요합니다. 항상 정확하게 5 개의 별이되기를 원하지만, 등급에 따라 별 나머지는 비어 있어야합니다. 나는 이것을 달성하기 위해 다음과 같은 코드가 있습니다. :

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

React는 각 범위에 대해 고유 한 키가 있어야한다고 말합니다. 어떻게 이것을 효과적으로 달성해야합니까? (나는 새로운 Date() 또는 Math.random()을 사용할 수 있다고 생각하지만 100 개 이상의 피드백 (각 별 다섯 개)의리스트에서 많은 불필요한 연산이 아닌가?)

Answer 1

React의 키와 효율적으로 사용하는 방법에 대해 설명합니다. this post이 유용 할 수 있습니다. 기본적으로 :

반응

다음 reconciliation process에 사용되는 구성 요소에-DOM 요소의 관계를 이해하는 중요한 소품을 사용합니다. 그러므로 열쇠가 항상 유일해야한다는 것이 매우 중요합니다. 그렇지 않으면 React가 요소를 혼합하고 잘못된 요소를 변형시킬 가능성이 있습니다.

말했다되고 그건

---

, 문제를 해결하기 위해,이 시도 :

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

을 짧은 구문, 당신은 할 수 :

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

이 또한주의 const을 가진 그 변수에 대한 읽기 전용 참조를 만들고 있으므로 변수를 변경하면 안됩니다. 이 경우 대신 let을 사용하십시오.