react项目，用react-sortable-hoc写一个demo，hook写法

好的，下面是一个使用 React Hooks 和 `react-sortable-hoc` 库编写的简单的 demo：

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

const SortableItem = SortableElement(({ value }) => (
  <div style={{ padding: '10px', background: '#f0f0f0', margin: '5px' }}>{value}</div>
));

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

const Demo = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4']);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(items =>
      items.reduce((arr, current, index) => {
        if (index === oldIndex) {
          return arr;
        }
        if (index === newIndex) {
          arr.push(items[oldIndex]);
        }
        arr.push(current);
        return arr;
      }, [])
    );
  };

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

export default Demo;

这个 Demo 中，我们使用了 `useState` 来管理列表项，并使用 `SortableContainer` 和 `SortableElement` 来渲染可拖拽的列表项。在 `onSortEnd` 回调中，我们通过更新 `items` 的顺序来更新列表项的顺序。