在React中交换组件

Question

在我的ReactJS项目中，我有一个MainComponent，其中包含一些在我的示例中记下的ChildComponents。我正在寻找一种顺利的方式来交换＆＃39;通过按钮向上/向下按下ChildComponents。

我已经检查过＆＃39; react-sortable-hoc＆＃39;但这似乎只是处理拖动鼠标或触摸，我正在通过点击事件搜索交换，例如包含向上/向下移动的按钮。

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

是否有任何此类建议的lib或方式存档此类内容？

Answer 1

我只是交换ChildComponent的顺序，但请确保正确管理每个keys的{​​{1}}道具。

因此，假设您的ChildComponent由以下方式呈现：

ChildComponent

确保使用不基于arrays.map(x => <ChildComponent keys={x.id} />) 索引的密钥。 比方说，交换第二和第三：

array

然后，您可以专注于更新let 2nd = arrays[1], 3rd = arrays[2]; array[2] = 2nd; array[1] = 3rd; 。如果您想要更多转换，请尝试reactcss-transition-group。