react-sortable-hoc配合ts使用

要在React项目中使用react-sortable-hoc并结合TypeScript使用，您需要执行以下步骤：

1. 安装依赖

npm install react-sortable-hoc @types/react-sortable-hoc

2. 导入SortableContainer和SortableElement

在您的组件中，您需要导入SortableContainer和SortableElement：

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

3. 创建可排序元素

使用SortableElement创建可排序元素：

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

4. 创建可排序列表

使用SortableContainer创建可排序列表：

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

5. 渲染可排序列表

最后，您可以渲染可排序列表：

function MySortableList() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

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

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

在这个例子中，我们使用useState来保持可排序列表中的项目，并使用onSortEnd回调函数来更新项目的顺序。

希望这可以帮助您在React项目中使用react-sortable-hoc和TypeScript。