react怎么实现列表排序

1. 前言

在开发web应用时，列表排序是一个非常常见的需求，例如对商品价格进行排序、对新闻按照发布时间排序等等。在React中，可以通过自己编写排序方法或使用第三方库来实现列表排序。本文将介绍如何使用第三方库react-sortable-hoc来实现列表排序。

2. 安装和基本使用

首先，我们需要使用npm安装react-sortable-hoc：

npm install react-sortable-hoc --save

然后我们可以按照以下步骤来实现列表排序功能：

2.1 创建列表组件

首先创建一个简单的列表组件，例如：

import React from 'react';

const List = ({items}) => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);
export default List;

这个组件接受一个名为items的props，包含了我们想要渲染的列表项。我们使用map函数将每个项都转换为一个li元素。

2.2 使用sortableContainer包装组件

在列表组件的导出语句中，使用react-sortable-hoc的sortableContainer方法来包装List组件：

import {sortableContainer} from 'react-sortable-hoc';

const SortableList = sortableContainer(List);
export default SortableList;

SortableList是我们包装后的组件，该组件会对List组件进行排序封装并自动将排序拖放事件分配给底层DOM元素。

2.3 使用sortableElement包装列表项

当我们已经有了可排序的列表容器后，接下来我们需要将每个列表项用sortableElement方法包装：

import {sortableElement} from 'react-sortable-hoc';

const SortableItem = sortableElement(({value}) => <li>{value}</li>);
export default SortableItem;

我们使用SortableItem来包装每个li元素，这些元素将成为一个可以拖放的列表。

2.4 渲染列表

最后，我们需要在父组件中使用SortableList和SortableItem来渲染可排序列表：

import React, {Component} from 'react';

import SortableList from './SortableList';
import SortableItem from './SortableItem';
class App extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex)
    }));
  };
  render() {
    const {items} = this.state;
    return <SortableList items={items} onSortEnd={this.onSortEnd} useDragHandle={true} helperClass="sortable-helper">
      {items.map((value, index) => (
        <SortableItem key={index} index={index} value={value} />
      ))}
    </SortableList>;
  }
}
export default App;

该组件接受一个名为items的状态值，其中包含了我们想要渲染的所有列表项。在onSortEnd函数中，我们可以更新items数组来反映列表项的新顺序。请注意，onSortEnd事件将oldIndex和newIndex作为参数。这些参数是被拖动的元素在列表中的原始位置和新位置。

在render函数中，我们将SortableList包装在标准的ul元素中，并将其所有列表项作为SortableItem组件嵌入其中。

3. 总结

React-Sortable-HOC是一个非常有用和易于使用的库，可以方便地实现可排序列表。 它提供了几个高阶组件，可以轻松创建可拖动的元素和容器。 我们可以通过将这些组件与React应用程序的现有组件相结合来实现强大而灵活的功能。 在使用React-Sortable-HOC时，我们只需考虑我们需要渲染的列表项和如何更新我们应用程序中的数据。 拖放功能和排序功能将由该库处理。