React: 고유한 '키'가 있는 목록 항목은 항목 순서가 변경되면 다시 렌더링됩니다.

안녕하세요 @dhruvparmar372입니다!

이것은 DOM의 한계인 것 같습니다. 이를 보여주기 위해 두 DOM 노드의 순서를 변경한 다음 전환을 트리거하는 클래스를 적용하는 이 JSFiddle 을 만들었습니다.

순서를 변경하고 애니메이션 속성을 업데이트하는 사이에 리플로우 를 트리거하여 이 문제를 해결할 수 있습니다.

<Box /> 를 클래스 구성 요소로 변경하고 생성자에서 고유 ID를 생성하여 React에 의해 구성 요소가 다시 생성될 때 CodeSandbox에 약간의 코드를 추가했습니다. 보시다시피 ID는 일관되게 유지됩니다. https://codesandbox.io/s/jn42wvl343

그 외에도 업데이트를 두 개의 setState 로 분할하여 예제에 리플로우 해결 방법을 적용했습니다. 첫 번째는 순서를 변경한 다음 리플로우를 트리거하고 나중에 위치를 변경합니다. 이것은 Chrome, Firefox, Safari 및 Edge에서 제대로 작동하는 것 같습니다(CodeSandbox는 IE11을 지원하지 않으므로 해당 브라우저에서 테스트할 수 없음).

안녕하세요 @philipp-spies 문제와 해결 방법에 대한 예를 명확히 해 주셔서 감사합니다.

안녕하세요, @philipp-spies

목록 정렬과 같은 문제가 있습니다 😔
불행히도 위의 Codesandbox 예제는 더 이상 작동하지 않습니다(

다음은 예입니다.
https://jsfiddle.net/9odLvbrx/
간단한 CSS 전환으로 클릭 시 항목을 정렬합니다.
문제는 전환이 선택한 항목에만 나타나고 나머지 항목은 생략된다는 것입니다.

이 문제를 해결하는 방법을 알고 있지만(코드에 주석 처리됨) 항목 수량이 절대 변경되지 않는 목록에서만 제대로 작동합니다. 따라서 항목을 추가하거나 제거하려면 항목이 엄청나게 복잡해집니다. 리플로우 과부하 솔루션을 사용하여 내 예에서 발생하도록 하려면 어떻게 해야 합니까?

미리 감사드립니다! 😊