React 多层级嵌套列表(树)的拖拽排序/移动，建议收藏大家好，我是双越，也是 wangEditor 作者。本文分享

大家好，我是双越，也是 wangEditor 作者。

今年我致力于开发一个 Node 全栈 AIGC 知识库划水AI，包括 AI 写作、多人协同编辑。复杂业务，真实上线，大家可以去注册试用，围观项目研发过程。

本文分享一下，如何使用 React + Dnd-kit 实现多层级嵌套列表（树）的拖拽排序和移动（如下图），源码链接在文章最后。

Dnd-kit 和 Sortable 组件

Dnd-kit 是 React 常用的拖拽工具，它也支持列表拖拽排序，文档和 demo docs.dndkit.com/presets/sor…

它的核心就是 <SortableContext> 组件，内部的元素即可拖拽排序，并且修改 items 数组的排序。

    <DndContext 
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext 
        items={items}
        strategy={verticalListSortingStrategy}
      >
        {items.map(id => <SortableItem key={id} id={id} />)}
      </SortableContext>
    </DndContext>

但它只支持单一层级的列表，想要实现多层级嵌套列表（树）的拖拽排序，还需要我们自己改造。

定义 state 数据结构

现代前端框架 React Vue 等都是数据驱动视图，所以凡事先定义数据结构，再考虑 UI 渲染。

多层级嵌套列表（树），最常见的数据结构定义如下，虚拟 DOM vnode 也是这样定义的。

const defaultItems = [
  { id: 'A', children: [] },
  {
    id: 'B',
    children: [
      { id: 'B1', children: [] },
      {
        id: 'B2',
        children: [
          { id: 'B2a', children: [] },
          { id: 'B2b', children: [] },
        ],
      },
    ],
  },
  { id: 'C', children: [] },
  {
    id: 'D',
    children: [
      { id: 'D1', children: [] },
      { id: 'D2', children: [] },
    ],
  },
  { id: 'E', children: [] },
]

多层嵌套 SortableContext 不可行

因为 state 数据结构是嵌套的，所以我首先想到的是一起嵌套渲染 UI 结构。

首先，在 <SortableContext> 中嵌套 <SortableItem> ，这和单层列表使用的方法一样。

然后，在 <SortableItem> 继续嵌套下级的 <SortableContext> ，用于显示 children

运行效果如下，这样的问题：同层级可以拖拽排序，但跨层级是不行的，因为不是一个 Context —— 想来这也合理

多层级转换为单一层级，可行

既然嵌套不可行，那就需要把多层级转换为第一层级。

但是需要为每个 item 增加 ancestorsIds 属性，第一为展示层级深度，第二可以知道它的父节点有哪些。

interface IItem {
  id: string
  ancestorIds?: string[]
  children?: IItem[]
}

function flatten(items: IItem[]): IItem[] {
  return items.reduce<IItem[]>((acc, item) => {
    acc.push(item)
    if (item.children) {
      const children = item.children.map((i) => ({
        ...i,
        ancestorIds: [...(item.ancestorIds || []), item.id], // add ancestorIds
      }))
      acc.push(...flatten(children))
    }
    return acc
  }, [])
}