博客管理端一直使用了 @ant-design/pro-components 库，减少了很多样板代码，列表、表单代码都比较简洁。

但有个问题，拖拽表格需要引入 react-sortable-hoc 并使用大量的示例代码，才能实现拖拽，可维护性不太好。而且项目升级 react 18 依赖后，因 react-sortable-hoc 内部的 peerDependencies 无该版本，导致无法直接使用 npm i 安装依赖，需要带上 --legacy-peer-deps 。

最近又把 @ant-design/pro-components 升级了，再去文档查看，发现已经有可拖拽表格组件 DragSortTable 了。使用非常简单：

<DragSortTable
  headerTitle="拖拽排序"
  columns={[
    {
      title: '排序',
      dataIndex: 'sort',
      width: 60,
      className: 'drag-visible',
      hideInTable: disabled,
    },
    // 其他字段
  ]}
  rowKey="id"
  dataSource={dataSource}
  pagination={false}
  toolBarRender={false}
  search={false}
  dragSortKey="sort"
  onDragSortEnd={handleDragSortEnd}
/>

回调函数直接返回排序完成后的数组，设置即可：

const handleDragSortEnd = (beforeIndex: number, afterIndex: number, newDataSource: any) => {
  handleChange(newDataSource);
};