重新排列子组件的顺序

Question

我正在React Native中编写滑块样式导航，您可以在其中滑动一堆卡片中的最顶层项目，并且它（应该）移动到堆栈的底部。

但是，由于React Native中没有zIndex，只有元素的顺序，我实际上很难将它移到后面。

鉴于{this.props.children}中的元素集合，我如何获取最顶层元素，将其移至后面并使用新订单重新渲染组件？

我已经尝试将孩子们带到州并做这样的事情：

this.setState({
    children: this.state.children.push(this.state.children.shift())
})

但我没有成功。在这种情况下，state.children设置为未定义。

是否有正确的重新排列元素的方法，因为没有zIndex？

Answer 1

Array.prototype.push()是一个就地方法，它更新数组并且不返回任何内容。

您只需拨打push()和this.setState({ children: this.state.children })即可。除了setState之外，您还可以使用this.forceUpdate()，因为状态中的引用并没有真正改变。