React 구성 요소 교환하기

Question

내 ReactJS 프로젝트에는 필자의 예제에서 적어 둔 ChildComponents를 포함하는 MainComponent가 있습니다. 난 버튼을 위아래로 ChildComponents '스왑'하는 부드러운 방법을 찾고 있습니다.

'react-sortable-hoc'을 체크 아웃했는데 마우스 나 터치로 드래그하는 것처럼 보입니다. 위로 이동/아래로 이동하는 버튼과 같은 클릭 이벤트를 통해 스왑을 검색하고 있습니다.

- MainComponent 
    - ChildComponent #1 [up/down] 
    - ChildComponent #2 [up/down] 
    - ChildComponent #3 [up/down] 
    - ChildComponent #4 [up/down] 

이러한 제안 된 lib 또는 이와 유사한 내용이 있습니까?

Answer 1

나는 단지 ChildComponent의 주문을 교환하지만 각 ChildComponent의 keys 소품을 올바르게 관리해야합니다. array 인덱스를 기반으로하지 키를 사용해야합니다

arrays.map(x => <ChildComponent keys={x.id} />) 

:

, 그래야 여러분의 ChildComponent는 렌더링이라고 가정. 말은, 예를 들어, 스왑 2, 3을 위해 :

let 2nd = arrays[1], 3rd = arrays[2]; 
array[2] = 2nd; 
array[1] = 3rd; 

그런 다음 array를 업데이트에 집중할 수 있습니다. 좀 더 전환하고 싶다면 을 사용해보세요.