sortable与React Hooks配合使用

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

在React项目中安装sortable库：

npm install react-sortable-hoc

导入sortable库和必要的React Hooks：

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

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

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

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

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

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

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

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

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

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

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

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