javascript - 在页面上将 react 组件移动到彼此之前/之后(排序)

Question

我的 react 组件以类似于此的方式相互跟随:

<MyComponent position="1" />
<MyComponent position="2" />
<MyComponent position="3" />
<MyComponent position="4" />
<MyComponent position="5" />

(可以有不同数量的组件)以及与其相关的以下渲染模板

<div data-position={this.props.position}>
  <span className="move-up" onClick={this.moveUp}>^</span>
  <span className="move-down" onClick={this.moveDown}>v</span>
</div>

moveUp 和 moveDown 函数目前都是空的。我试图找出正确的 react 方法，根据单击的跨度(上移或下移)将组件移动到其邻居的下方或上方。移动完成后，我还需要分别更新位置 Prop 。

这个例子可以是有人在位置 2 的 MyComponent 上单击下移，它将其向下移动到位置 3，并且之前位于位置 3 的组件现在变为位置 2，如果组件向上移动，则反之亦然。

Answer 1

这个想法是把你所有的<MyComponent />在数组中，并在 moveUp 和 moveDown 操作中交换数组的内容。

let arr = []; // make it a state variable
for (let i = 0; i < 5; i++) {
     arr.push( <MyComponent key = {i} moveUp = {this.moveUp.bind(this)}   moveDown = {this.moveDown.bind(this)} position = {i}/>)
}
this.setState({arr : arr});

以及上移/下移操作

moveUp(index){
  let arr = this.state.arr;
  // SWAP array content
  let tmp = arr[index];
  arr[index] = arr[index + 1]; // put more conditions to handle edge cases
  arr[index + 1] = tmp;
  this.setState({arr: arr});
}