Antd Tree组件：在onDrop事件中可靠确定拖拽放置位置索引

核心问题分析 #

你遇到的dropPosition偏差、event.node.children缺失问题，本质是Antd Tree拖拽事件在受控模式下，部分内置属性依赖组件内部状态而非用户传入的受控状态，导致数据不一致。以下是两种可靠的解决思路：

方法一：基于自定义节点映射表计算索引 #

完全脱离对事件内置属性的依赖，通过维护自己的节点位置映射表来精准计算放置索引：

1. 构建节点位置映射表
   在组件内维护一个Map，记录每个节点的父节点key和自身在父节点子数组中的索引，每次受控状态更新时同步更新该映射表：

   const buildNodeMap = (treeData, parentKey = null, nodeMap = new Map()) => {
     treeData.forEach((node, index) => {
       nodeMap.set(node.key, { parentKey, index });
       if (node.children?.length) {
         buildNodeMap(node.children, node.key, nodeMap);
       }
     });
     return nodeMap;
   };
   
   // 在组件中使用useMemo缓存映射表
   const nodeMap = useMemo(() => buildNodeMap(yourControlledTreeData), [yourControlledTreeData]);
   

2. 在onDrop中计算目标索引
   通过映射表获取拖拽节点、目标节点的原始位置，结合dropToGap判断放置类型，调整索引计算逻辑：

   const handleDrop = (info) => {
     const { dragNode, node, dropPosition, dropToGap } = info;
     const dragNodeMeta = nodeMap.get(dragNode.key);
     const dropNodeMeta = nodeMap.get(node.key);
   
     let targetParentKey;
     let targetIndex;
   
     if (!dropToGap) {
       // 拖拽到节点内部，作为子节点插入到末尾
       const targetNode = yourControlledTreeData.find(item => item.key === node.key);
       targetParentKey = node.key;
       targetIndex = targetNode?.children?.length || 0;
     } else {
       // 拖拽到同层级节点之间
       if (dragNodeMeta.parentKey === dropNodeMeta.parentKey) {
         // 同一父节点内拖拽，修正dropPosition偏差
         const originalDropNodeIndex = dropNodeMeta.index;
         targetIndex = dropPosition > originalDropNodeIndex ? dropPosition - 1 : dropPosition;
         targetParentKey = dragNodeMeta.parentKey;
       } else {
         // 跨父节点拖拽，直接使用dropPosition作为插入索引
         targetIndex = dropPosition;
         targetParentKey = dropNodeMeta.parentKey;
       }
     }
   
     // 后续根据targetParentKey和targetIndex更新受控状态
     // ... 你的状态更新逻辑
   };
   

方法二：利用事件属性结合原始状态修正 #

如果不想维护额外映射表，可以通过事件属性结合自己的受控状态来修正索引：

const handleDrop = (info) => {
  const { dragNode, node, dropPosition, dropToGap } = info;
  let targetParentKey = node.key;
  let targetIndex;

  if (!dropToGap) {
    // 插入到目标节点的子数组末尾
    const targetNode = yourControlledTreeData.find(item => item.key === node.key);
    targetIndex = targetNode?.children?.length || 0;
  } else {
    // 获取目标节点在其父节点子数组中的原始索引
    const getNodeIndex = (parentKey, targetKey) => {
      if (!parentKey) {
        return yourControlledTreeData.findIndex(item => item.key === targetKey);
      }
      const parentNode = yourControlledTreeData.find(item => item.key === parentKey);
      return parentNode?.children?.findIndex(item => item.key === targetKey) ?? 0;
    };

    const dropNodeIndex = getNodeIndex(dropNodeMeta.parentKey, node.key);
    const dragParentKey = getNodeIndex(null, dragNode.key) === -1 
      ? nodeMap.get(dragNode.key).parentKey 
      : null;

    if (dragParentKey === dropNodeMeta.parentKey) {
      // 同一父节点内拖拽，修正dropPosition
      targetIndex = dropPosition > dropNodeIndex ? dropPosition - 1 : dropPosition;
      targetParentKey = dragParentKey;
    } else {
      targetIndex = dropPosition;
      targetParentKey = dropNodeMeta.parentKey;
    }
  }

  // 状态更新逻辑
};

关键注意事项 #

• 始终基于自己的受控状态计算节点位置，不要依赖event.node.children这类不稳定的内置属性；
• 同一父节点内拖拽时，通过比较目标节点的原始索引和dropPosition的大小关系，修正索引偏差；
• 两种方法都需要确保受控状态更新时，节点的key全局唯一，否则会出现映射错误。

内容的提问来源于stack exchange，提问作者Роман Пермяков