dnd-kit拖拽手柄切换可见性后失效问题排查

问题现象 #

• 根据用户条件渲染拖拽手柄组件，隐藏后再次显示时，拖拽功能完全失效
• 组件可正常响应点击，系统日志显示“正在拖拽”状态，但实际拖拽动作无法执行
• 只有重新生成数据才能恢复拖拽功能

排查过程 #

• 最初怀疑是TanStack Table的问题，但移除该组件后问题依然存在
• 测试发现：拖拽手柄的任何重新渲染都会触发该问题
• 尝试用相同数据重置数组实例，试图重置可排序列表，无效
• 考虑过用display: none作为临时方案，但不想放弃TanStack Table自带的列可见性切换API

问题定位（更新1） #

问题根源锁定在SortableContext组件：

• 重新生成数据能解决问题，说明拖拽手柄本身无问题
• 尝试给SortableContext设置动态key={${Date.now()}}强制React刷新，拖拽功能恢复正常，但这只是临时权宜之计

最终解决方案（更新2） #

通过在表格组件中暴露强制重新挂载SortableContext的方法来解决：

// 递增该值可强制SortableContext重新挂载
const [sortableContextKey, setSortableContextKey] = useState(0);

// 通过forwardRef暴露方法给父组件，useImperativeHandle仅配合forwardRef使用
useImperativeHandle(
  ref,
  () => {
    return {
      remountSortableContext() {
        setSortableContextKey(sortableContextKey + 1);
      },
      table
    };
  },
  [sortableContextKey, table]
);

// .....

<SortableContext
  items={identifiers}
  strategy={verticalListSortingStrategy}
  disabled={!enableDragging}
  key={sortableContextKey}
>
 // 子组件内容
</SortableContext>

现在只需在父组件恢复拖拽手柄列可见性时，调用表格ref的remountSortableContext方法，即可让拖拽功能恢复正常。

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