介绍
drag-and-drop-tree-react 是一款基于 React 的 npm 包，用于实现可拖拽的树形控件。
在前端开发中，树形控件是很常见的一种组件。然而，一些场景下需要对树形节点进行排序、拖拽、拖拽到不同层级等操作。这些功能在传统的树形控件中并未实现，而 drag-and-drop-tree-react 可以轻松实现这些功能。
安装
drag-and-drop-tree-react 可以通过 npm 安装：
npm install drag-and-drop-tree-react --save
使用
使用 drag-and-drop-tree-react 很简单，我们只需要使用 import 引入需要的组件即可：
import { DragDropContext, droppable, draggable } from 'drag-and-drop-tree-react';DragDropContext
DragDropContext 组件是这个包的核心组件。wrapper 根节点，它是所有节点的父元素，负责将整个 tree 中的拖拽事件 Contact 提供给 droppable 和 draggable 组件。
示例代码：
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------
----- --- - -- -- -
-- ---
------ -
-----------------
--- --------- - --------- ----------- ---
--- --- ---
------------------
--
--Droppable
Droppable 用于包裹存在拖拽事件的元素。在可拖拽树状结构中，垂直列表中的元素连续地呈现，并且拖动 item 时，其顺序可以在传递的列表中变化。 Droppable 组件将每个 droppable 节点封装在对象中，并提供具体实现。
示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------------
----- --- - -- -- -
-- ---
------ -
-----------------
---------- -----------------------
--- ---------- --------- ----- ---
--- --- ---
------------
------------------
--
--Draggable
Draggable 组件对应包裹树中的每个拖动元素。
示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------------
----- --- - -- -- -
-- ---
------ -
-----------------
---------- -----------------------
--------- -- -
---- ---------------------------- ------------------------
----------------- ------ -- -
------ -
----------
-------------
---------------------
-------------
-
--------- -- -
----
-----------------------
----------------------------
-----------------------------
-
-------------------------
------
--
------------
--
---
------
--
------------
------------------
--
--指导意义
drag-and-drop-tree-react 常用于需要树形结构并支持排序和拖拽的 Web 应用程序的开发中，这种控件通常用于主题或管理文档或的流程或者其他可拖动的 Web 应用程序中。drag-and-drop-tree-react 可以帮助我们提高效率，减少重复性工作时间和强制执行拖放排序及其他规则。
在使用 drag-and-drop-tree-react 的过程中，可能需要掌握 React 的一些基础技术，如 useContext 和 useMemo。此外，还应让自己对树型数据结构有所了解，例如树型数据的遍历方式，如广度优先遍历与深度优先遍历等。
结论
drag-and-drop-tree-react 是 React 下一款轻量级、声明式、易于使用的 npm 包。通过使用 drag-and-drop-tree-react，可以轻松高效地实现可排序、可拖拽的树形控件，也可以为 Web 应用程序的开发带来便利。
示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------------- ---------- --------- - ---- ---------------------------
----- ------------ - -
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
- --- --------- -------- ----- -- --
--
----- --- - -- -- -
----- ------- --------- - -----------------------
----- ------------- - ------ -- -
-- --------------------- -
-------
-
----- - ------- ----------- - - -------
----- -------- - -----------
----- --------- - ----------------------------- ---
---------------------------------- -- ---------
-------------------
--
------ -
---------------- --------------------------
---------- -----------------------
--------- -- -
--- ---------------------------- ------------------------
----------------- ------ -- -
---------- ------------- --------------------- --------------
--------- -- -
---
----------------
-----------------------
----------------------------
-----------------------------
-
--------------
-----
--
------------
---
----------------------
-----
--
------------
------------------
--
--
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d381e8991b448d207a