Question

我以相似的方式对组件做出反应：

<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函数都是空的。我试图找出正确的反应方法，根据点击的跨度（向上移动或向下移动）将组件移动到其邻居之下或之上。移动完成后，我还需要分别更新位置道具。

此示例可以是某人点击MyComponent上的位置2下移，它将其向下移动到位置3，之前位置3的组件现在变为位置2，如果组件向上移动，则反之亦然。

Answer 1

我们的想法是将所有<MyComponent />放在一个数组中，并在moveUp和moveDown Action上交换数组的内容。

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 / Down动作

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});
}

Answer 2

只需使用flexbox。您可以将它与React-native和浏览器一起使用。它比在数组中移动东西和保持数组顺序要容易得多。使用flexbox，您可以使用数组，您可以使用对象而不关心JavaScript中的订单问题。

这是我最喜欢的flexbox指南： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

简而言之，在项目周围添加div并设置其样式：

display: flex;

对于儿童添加

order: X;

订单只是任何数字。默认值为0.

您可以在此处阅读有关此道具的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/order

使用flexbox，您将支持IE10 +和真正的浏览器：Chrome，FF，Safari。 http://caniuse.com/#search=flexbox

知道，Windows不支持IE10和任何旧的IE并且向IE用户提醒这一点，停止支持那些旧的掷骰子已经是安全的了。 https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support

在页面上相互之前/之后移动反应组件（排序）

2 个答案: