在React中交换组件

时间:2017-09-07 09:40:17

标签: reactjs components react-redux

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

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

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

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

1 个答案:

答案 0 :(得分:0)

我只是交换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