在前端开发中，树形结构的展示和拖拽都是常见的需求，但是如何实现一个完整的可拖拽的树形结构组件并不容易。幸运的是，在 npm 上有一个非常好用的包 @csberger/react-sortable-tree，它提供了一个完整的可拖拽树形结构的 React 组件。
安装
我们可以通过 npm 来安装它：
npm install --save @csberger/react-sortable-tree
安装完成后，就可以将它引入到项目中进行使用。
使用
引入包之后，我们需要创建一个可拖拽的树形结构组件。首先，我们需要一个树形结构的数据：
-- -------------------- ---- -------
----- -------- - -
-
------ ----- ---
--------- -
-
------ ------ ---
--
-
------ ------ ---
--
--
--
-
------ ----- ---
--------- -
-
------ ------ ---
--
-
------ ------ ---
--
--
--
--其中，每个节点都必须包含一个 title 属性，用来展示该节点的内容，同时，一个节点也可以拥有一个 children 属性，用来表示它的子节点。
接下来，在组件中，我们可以引入 SortableTree，并使用它来渲染上面的树形结构数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- --------------------------------
------ ------------------------------------------ -- ------
-------- -------- -
------ -
---- -------- ------- --- ---
------------- ------------------- --------------------- -- ------------------------- --
------
--
-其中，treeData 是上面定义的树形结构数据，onChange 是树形结构数据变化时的回调函数。我们将树形结构数据作为 treeData 的属性值传入 SortableTree，就可以看到一个可拖拽的树形结构了：
此时，我们可以使用鼠标来拖拽节点和子节点。
不过，如果您想要自定义样式，可以对 SortableTree 进行一些修改，例如对根节点的样式进行自定义：
-- -------------------- ---- -------
-------------
-------------------
--------------------- -- -------------------------
--------------------- ----- ---- -- -- --
------ -
----------- ---------- --- ----- -- -- ------
--
---
--通过 generateNodeProps 函数可以设置每个节点的属性，我们在这里设置了根节点的样式为红色。
事件处理
在使用可拖拽树形结构的过程中，我们可能会遇到需要监听树结构变化的需求，如何实现呢？
SortableTree 的 onChange 属性可以接收一个回调函数，该函数会在树形结构数据变化时被调用，而新的树形结构数据则作为该函数的唯一参数传入。
function handleTreeDataChange(newTreeData) {
console.log(newTreeData);
}
<SortableTree treeData={treeData} onChange={handleTreeDataChange} />支持拖拽到外部容器
有些情况下，我们可能希望将拖拽的节点拖拽到外部容器中（比如可视化的编辑器中），该如何实现呢？
我们可以通过设置 dndType 属性来实现该功能。dndType 可以指定拖拽的节点传递的数据类型，从而方便外部容器接收。
-- -------------------- ---- -------
----- --------- - -
------ --------
--
-------- ------------------ -
-------- ----------------- -
----- - ------ ------ - - -----------------------------------------
--------------------- ------ --------
-
-------- --------------------- -
-----------------------
-
-------- ---------------------- -
-----------------------
-
------ -
---- ------------------- --------------------------- ------------------------------
-------- ----------
------
--
-
-------------
-------------------
--------------------- -- -------------------------
--------------------- ---- -- -- --
---------- -
------ -----------
------- --------------
-------- ----------------
--
---
--
---- -------- -------- ------- --------------- --------------- ---
---- -------- ----- -- - ------ ---
----------------- --
------
---- -------- ----- - ---
-------------
-------------------
--------------------- -- -------------------------
-------------------------
--
------
------总结
本文介绍了如何使用 @csberger/react-sortable-tree 包来实现可拖拽树形结构的组件，并针对一些常见需求给出了相应的实现方法。对于那些需要实现树形结构的开发者来说，这个包无疑是一个非常好的选择，希望本文可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560c081e8991b448df076