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] 

このようなライブラリを提案する方法はありますか？

Answer 1

私は単にChildComponentの注文を交換しますが、keysの小道具をそれぞれChildComponentに正しく管理してください。

あなたChildComponentがでレンダリングされると仮定すると、だから：array指標に基づいていないキーを使用してください

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

。 セイは、例えば、2番目と3番目を入れ替える：

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

あなたはその後、arrayの更新に集中することができます。もう少し移行したい場合は、を試してみる価値があります。