sortable与React Hooks配合使用

sortable是一个用于实现拖拽排序的库，而React Hooks是React提供的一种新的特性，用于在函数组件中使用状态和其他React特性。要将sortable与React Hooks配合使用，可以按照以下步骤进行：

1. 在React项目中安装sortable库：

npm install react-sortable-hoc

2. 导入sortable库和必要的React Hooks：

import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import { useState } from 'react';

3. 使用useState钩子创建一个状态来存储排序后的数据：

const [items, setItems] = useState([1, 2, 3, 4, 5]);

4. 创建一个SortableContainer，并在其中映射排序后的数据：

const SortableList = SortableContainer(() => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

5. 创建一个SortableElement组件，用于渲染每个排序项：

const SortableItem = SortableElement(({ value }) => {
  return <li>{value}</li>;
});

6. 在SortableList组件中使用onSortEnd回调函数来处理拖拽排序结束后的逻辑：

const onSortEnd = ({ oldIndex, newIndex }) => {
  setItems(arrayMove(items, oldIndex, newIndex));
};

7. 最后，在组件中渲染SortableList组件，并将onSortEnd回调函数传递给它：

return <SortableList items={items} onSortEnd={onSortEnd} />;

通过以上步骤，您可以将sortable与React Hooks配合使用，实现拖拽排序功能并在函数组件中管理状态。