react-dnd DropTarget在antd Tree开启draggable时失效问题求助

核心思路是不破坏antd Tree原生拖拽逻辑，通过结合react-dnd的全局拖拽状态和Tree的原生onDrop事件，同时处理内部节点拖拽和外部Table项拖拽，避免react-dnd的DropTarget与Tree自带draggable的冲突。

具体实现步骤 #

1. 给Table行配置react-dnd拖拽源
   用react-dnd的useDrag给Table的可拖拽行注册拖拽源，拖拽时将项目信息存入useRef（而非组件状态，避免重渲染延迟）。

2. 利用Tree原生onDrop事件区分拖拽类型
   Tree的onDrop事件会返回完整的拖拽信息，在回调里判断当前拖拽是Tree内部节点还是来自Table的外部项：

   • 内部拖拽：直接用Tree原生逻辑处理节点移动/排序
   • 外部拖拽：结合useRef或react-dnd monitor获取的项目信息，执行添加到目标文件夹的逻辑

3. 用useRef解决拖拽延迟问题
   组件状态更新会触发重渲染，导致真实项目中拖拽结束后状态重置延迟，无法立即发起第二次拖拽。用useRef存储拖拽信息，不会触发重渲染，能实时更新和读取。

关键代码示例 #

1. 配置Table行的拖拽源

import { useDrag } from 'react-dnd';

const TableRow = ({ item }) => {
  const draggedItemRef = useRef(null);

  const [{ isDragging }, drag] = useDrag({
    type: 'TABLE_ITEM',
    item: () => {
      draggedItemRef.current = item;
      return item;
    },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <tr ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {/* 表格内容 */}
    </tr>
  );
};

2. 处理Tree的拖拽逻辑

import { Tree } from 'antd';
import { useDragDropManager } from 'react-dnd';

const FolderTree = () => {
  const draggedItemRef = useRef(null);
  const manager = useDragDropManager();
  const monitor = manager.getMonitor();

  const handleTreeDrop = (info) => {
    // 判断拖拽来源是否是Table项
    const isExternalDrag = monitor.getItemType() === 'TABLE_ITEM';
    
    if (isExternalDrag) {
      // 获取拖拽的项目和目标文件夹
      const targetFolder = info.node;
      const draggedItem = draggedItemRef.current;

      // 执行业务逻辑：将项目添加到目标文件夹
      console.log(`添加项目 ${draggedItem.name} 到文件夹 ${targetFolder.title}`);
      
      // 重置拖拽状态
      draggedItemRef.current = null;
    } else {
      // 处理Tree内部节点拖拽的原生逻辑
      const { dragNode, node, dropPosition } = info;
      // 这里实现内部节点的移动/排序逻辑，比如更新Tree数据
    }
  };

  return (
    <Tree
      draggable
      onDrop={handleTreeDrop}
      // 其他Tree配置（如treeData等）
    />
  );
};

3. 增加悬停视觉反馈（可选）

如果需要拖拽Table项到Tree时，目标文件夹高亮，可以给Tree容器添加react-dnd的useDrop监听悬停状态，结合Tree的treeNodeProps自定义样式：

import { useDrop } from 'react-dnd';

const FolderTree = () => {
  const [hoveredNodeKey, setHoveredNodeKey] = useState(null);
  const [{ isOver }, drop] = useDrop({
    accept: 'TABLE_ITEM',
    collect: monitor => ({
      isOver: monitor.isOver(),
    }),
  });

  // 监听Tree节点的鼠标进入/离开事件，记录当前悬停节点
  const handleNodeMouseEnter = (key) => {
    if (isOver) setHoveredNodeKey(key);
  };

  const handleNodeMouseLeave = () => {
    setHoveredNodeKey(null);
  };

  return (
    <div ref={drop}>
      <Tree
        draggable
        onDrop={handleTreeDrop}
        treeNodeProps={(node) => ({
          onMouseEnter: () => handleNodeMouseEnter(node.key),
          onMouseLeave: handleNodeMouseLeave,
          className: node.key === hoveredNodeKey ? 'hovered-folder' : '',
        })}
      />
    </div>
  );
};

// 对应的CSS
.hovered-folder {
  background-color: #e6f7ff;
}

方案优势 #

• 完全保留antd Tree自带的内部拖拽功能，无需二次实现
• 用useRef存储拖拽信息，避免组件重渲染导致的拖拽延迟
• 通过react-dnd monitor和Tree原生事件结合，精准区分拖拽来源，逻辑清晰

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