在 React 中交换组件

Question

在我的 ReactJS 项目中，我有一个 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 的顺序，但请确保正确管理每个ChildComponent 的keys 道具。

因此，假设您的 ChildComponent 由以下人员呈现：

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

确保使用不基于array 索引的密钥。 比如说，交换第 2 和第 3：

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

然后您可以专注于更新array。如果你想要更多的过渡，值得尝试reactcss-transition-group。