Permutation de composants dans React

Question

Dans mon projet ReactJS, j'ai un MainComponent qui contient des ChildComponents comme indiqué dans mon exemple. Je suis à la recherche d'un moyen simple d'échanger les ChildComponents via un bouton haut/bas.

J'ai vérifié 'reactif-sortable-hoc' mais cela semble juste manipuler glisser par la souris ou le toucher, je suis à la recherche d'un échange via des événements de clic comme un bouton contenant monter/descendre.

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

Y at-il suggéré par ces moyens ou lib pour archiver quelque chose comme ça?

Answer 1

Je voudrais simplement échanger l'ordre de votre ChildComponent, mais assurez-vous de gérer keys les accessoires de chaque ChildComponent correctement.

Alors que, en supposant que votre ChildComponent est rendu par:

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

Assurez-vous d'utiliser la clé ne repose pas sur l'indice array. Disons, par exemple, 2e et 3e échange:

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

Vous pouvez ensuite se concentrer sur la mise à jour array. Si vous voulez une transition plus, il vaut la peine d'essayer reactcss-transition-group.