如何在React函数组件中结合antd-table使用react-drag-listview实现可拖拽列

我想用Ant Design创建支持列拖拽的表格，但一直使用React函数组件开发，网上找到的react-drag-listview相关示例和文档都是类组件写法，不清楚如何在函数组件中使用该库。以下是我参考的类组件代码：

this.state = {
  columns: [
    {
      title: <span className="dragHandler">Key</span>,
      dataIndex: "key",
      render: (text) => <span>{text}</span>,
      width: 50
    },
    {
      title: <span className="dragHandler">Name</span>,
      dataIndex: "name",
      width: 200
    },
    {
      title: <span className="dragHandler">Gender</span>,
      dataIndex: "gender",
      width: 100
    },
    {
      title: <span className="dragHandler">Age</span>,
      dataIndex: "age",
      width: 100
    },
    {
      title: <span className="dragHandler">Address</span>,
      dataIndex: "address"
    }
  ]
};

const that = this;
this.dragProps = {
  onDragEnd(fromIndex, toIndex) {
    const columns = [...that.state.columns];
    const item = columns.splice(fromIndex, 1)[0];
    columns.splice(toIndex, 0, item);
    that.setState({
      columns
    });
  },
  nodeSelector: "th",
  handleSelector: ".dragHandler",
  ignoreSelector: "react-resizable-handle"
};

函数组件实现示例 #

import React, { useState } from 'react';
import { Table } from 'antd';
import ReactDragListView from 'react-drag-listview';

const DragTable = () => {
  // 用useState管理列数据状态
  const [columns, setColumns] = useState([
    {
      title: <span className="dragHandler">Key</span>,
      dataIndex: "key",
      render: (text) => <span>{text}</span>,
      width: 50
    },
    {
      title: <span className="dragHandler">Name</span>,
      dataIndex: "name",
      width: 200
    },
    {
      title: <span className="dragHandler">Gender</span>,
      dataIndex: "gender",
      width: 100
    },
    {
      title: <span className="dragHandler">Age</span>,
      dataIndex: "age",
      width: 100
    },
    {
      title: <span className="dragHandler">Address</span>,
      dataIndex: "address"
    }
  ]);

  // 模拟表格数据源
  const dataSource = [
    { key: '1', name: 'John Doe', gender: 'Male', age: 28, address: 'New York No. 1 Lake Park' },
    { key: '2', name: 'Jane Smith', gender: 'Female', age: 24, address: 'London No. 1 Lake Park' },
    { key: '3', name: 'Jim Brown', gender: 'Male', age: 30, address: 'Sydney No. 1 Lake Park' }
  ];

  // 拖拽配置参数
  const dragProps = {
    onDragEnd(fromIndex, toIndex) {
      // 复制列数据并调整顺序
      const newColumns = [...columns];
      const movedItem = newColumns.splice(fromIndex, 1)[0];
      newColumns.splice(toIndex, 0, movedItem);
      // 更新列状态
      setColumns(newColumns);
    },
    nodeSelector: "th",
    handleSelector: ".dragHandler",
    ignoreSelector: "react-resizable-handle"
  };

  return (
    <ReactDragListView {...dragProps}>
      <Table
        columns={columns}
        dataSource={dataSource}
        bordered
      />
    </ReactDragListView>
  );
};

export default DragTable;

关键说明 #

• 用useState替代类组件的this.state管理列数据，拖拽结束后通过setColumns直接更新列顺序
• 无需额外保存上下文，函数组件中可直接访问状态和状态更新方法
• 核心拖拽配置逻辑与类组件一致，仅将状态更新方式替换为函数组件的写法

内容的提问来源于stack exchange，提问作者Z0mB1t