forked-react-sortable-tree 是一款基于 React 的可拖拽排序树形组件。它不仅具有拖拽排序的功能，还支持多选、展开、折叠等，非常适合用于前端项目的管理页面和导航栏。
该 npm 包是基于 react-sortable-tree 的改进版，修复了一些 bugs，并且能够兼容较老版本的 React 库。本篇文章将为读者详细介绍该 npm 包的使用方法，并附上示例代码供参考。
安装
首先，在项目目录下使用 npm 安装该包：
npm i forked-react-sortable-tree
引入
安装完毕后，在项目中引入该组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- -----------------------------
------ ---------------------------------------
----- --- - -- -- -
---- -------- ------- --- ---
------------- --
------
--
-------------------- --- ---------------------------------注意：需要额外引入 style.css 文件。
使用
数据格式
forked-react-sortable-tree 的核心是数据的格式，它使用对象数组存储树形数据。每个对象称为一个节点（node），包含以下几个属性：
title：节点标题，可以是字符串或 JSX；subtree：子节点数组，如果有子节点，就将其放在这个数组中；expanded：是否展开子节点，初始为false；children：同subtree，用于兼容旧版本。
例如，一个简单的树形数据如下：
-- -------------------- ---- -------
----- ---- - -
-
------ --------
-------- -
-
------ ----------
--
-
------ ----------
--
--
--
-
------ --------
-------- -
-
------ ----------
--
--
--
--展示方式
使用 forked-react-sortable-tree 展示组件非常简单，只需要将数据传入 treeData 属性，就可以实现树形展示：
<SortableTree treeData={data} />该组件支持自定义节点视图、节点样式、拖拽样式等功能，具体使用方法可以参考官方文档。
回调函数
通常情况下，我们需要监听用户的操作并作出相应的响应。forked-react-sortable-tree 提供了一些回调函数以供开发者使用：
onChange：当用户拖拽节点时触发，函数接收一个treeData参数，表示当前用户操作后的树形数据；onMoveNode：当节点位置发生变化时触发，函数接收一个treeData参数，表示当前节点位置变化后的树形数据；onVisibilityToggle：当用户展开或折叠节点时触发，函数接收节点的key和一个expanded参数，表示当前节点是否展开；onStart和onEnd：当节点开始拖拽和结束拖拽时触发；canDrag和canDrop：用于判断节点是否可拖拽或可放置，返回true或false。
例如，监听用户操作：
const onChange = treeData => {
console.log(treeData);
};
<SortableTree treeData={data} onChange={onChange} />示例代码
最后，给读者提供一个完整的示例代码：展示一个带有拖拽排序、展开、折叠功能的树形组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ ------------ ---- -----------------------------
------ ---------------------------------------
----- ---- - -
-
------ --------
-------- -
-
------ ----------
--
-
------ ----------
--
--
--
-
------ --------
-------- -
-
------ ----------
--
--
--
--
----- --- - -- -- -
----- ---------- ------------ - ---------------
----- -------- - -------- -- -
----------------------
--
----- ------------------- - -------- -- -- ----- ---- -- -- -
------------
-- ------------ ----- -----
-- ---- ----------- ------
---------------- -- -- -- --- ---------------- - -- - - -------- -------- - - ----
--
--
------ -
---- -------- ------- --- ---
-------------
-------------------
-------------------
----------------------------------------
--
------
--
--
-------------------- --- ---------------------------------该示例代码实现了展开、折叠、拖拽排序等基本功能，并且使用了 useState 钩子函数和对象解构等 React 新特性，是一个适合学习和参考的例子。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dacec