다음을 사용하여 TSX 요소 목록을 생성하고 있습니다.
this.productsModel = this.state.products.map(o => (
<Grid.Column key>
그러나 반응은 다음과 같이 경고합니다.
경고 : 목록의 각 하위 항목에는 고유 한 "키"소품이 있어야합니다.
따라서 권장되는 방법 [1]을 추가합니다.
this.productsModel = this.state.products.map((o, i) => (
<Grid.Column key={i}>
그러나 key={i}요소 (무엇이든, 렌더링 밖으로 제거되고 Grid.Column, div등). 어떻게 오나요? 이것을 해결하는 방법?
핵심 요소는 DOM에 전달되지 않아야하며, React 최적화 전용으로 예약 된 소품입니다.
따라서 다음과 같은 키를 추가하면
this.productsModel = this.state.products.map((o, i) => (
<Grid.Column key={i}>
키는 Grid.Column 구성 요소로 전달되지 않고 실제로 모든 소품을 전달하는 동안 읽기에 의해 제거됩니다.
또한 map 함수 내에서 반환 된 요소에 대한 고유 키를 제공해야합니다.
렌더링되는 요소를 추적하는 반응을 위해 Key가 제공되므로 요소가 삭제되거나 목록이 정렬 된 경우 모든 항목을 다시 마운트 할 필요는 없지만 가상 DOM 비교 중에 올바른 요소를 비교합니다. 이런 식으로 실제로 성능을 향상시킵니다.
인덱스를 사용하면 경고가 제거 되더라도 키는 많은 이점을 제공하지 않습니다. 제품 배열 내 각 제품 개체의 고유 ID를 키로 사용하는 것이 좋습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다