请求将DevExtreme List拖拽功能的React类组件转为函数组件

我尝试在React中实现ItemDragging功能的函数组件但未成功，遇到了实现困难。现有一段基于DevExtreme List的类组件代码，包含onDragStart、onAdd、onRemove、onReorder等拖拽相关方法，以下是转换后的函数组件实现：

转换后的完整函数组件代码 #

import React, { useState, useCallback } from 'react';
import List from 'devextreme-react/list';
import { ItemDragging } from 'devextreme-react/list';

export default function DraggableList() {
  // 初始化列表数据，可替换为原类组件的初始state数据
  const [items, setItems] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
    { id: 4, text: 'Item 4' },
    { id: 5, text: 'Item 5' }
  ]);
  // 存储当前拖拽的项
  const [draggedItem, setDraggedItem] = useState(null);

  // 拖拽开始时记录当前项
  const handleDragStart = useCallback((e) => {
    setDraggedItem(e.itemData);
  }, []);

  // 拖拽添加项时更新列表
  const handleAdd = useCallback((e) => {
    const updatedItems = [...items];
    updatedItems.splice(e.toIndex, 0, draggedItem);
    setItems(updatedItems);
  }, [items, draggedItem]);

  // 拖拽移除项时更新列表
  const handleRemove = useCallback((e) => {
    const updatedItems = [...items];
    updatedItems.splice(e.fromIndex, 1);
    setItems(updatedItems);
  }, [items]);

  // 拖拽重排项时更新列表
  const handleReorder = useCallback((e) => {
    const updatedItems = [...items];
    const movedItem = updatedItems.splice(e.fromIndex, 1)[0];
    updatedItems.splice(e.toIndex, 0, movedItem);
    setItems(updatedItems);
  }, [items]);

  return (
    <List
      dataSource={items}
      // 自定义项渲染，可根据原需求调整
      itemRender={({ itemData }) => (
        <div style={{ padding: '10px', border: '1px solid #eee' }}>
          {itemData.text}
        </div>
      )}
    >
      <ItemDragging
        allowReordering={true}
        onDragStart={handleDragStart}
        onAdd={handleAdd}
        onRemove={handleRemove}
        onReorder={handleReorder}
      />
    </List>
  );
}

关键转换说明 #

• 状态管理：用useState替代类组件的this.state，分别管理列表数据items和当前拖拽项draggedItem，状态更新通过setItems和setDraggedItem完成
• 稳定回调：用useCallback包裹所有拖拽事件处理函数，确保函数引用稳定，避免DevExtreme组件因回调频繁变化触发不必要的重渲染
• 不可变更新：所有列表数据的修改都采用不可变方式（扩展运算符生成新数组、splice操作后返回新数组），符合React状态更新的最佳实践

如果原类组件包含更复杂的业务逻辑（比如数据请求、额外状态），只需对应将类中的实例方法转换为函数组件内的函数，实例属性转换为useState或useRef即可。

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