react-ui-tree-draggable 是一个 React UI 树插件，可以让你在你的应用中快速实现一个可拖拽的 UI 树。本文将介绍如何使用 react-ui-tree-draggable。
安装
react-ui-tree-draggable 可以通过 npm 安装：
npm install react-ui-tree-draggable
使用
在你的 React 项目中，导入 react-ui-tree-draggable：
import React, { Component } from 'react';
import { Tree } from 'react-ui-tree-draggable';然后在 render 函数中，创建 Tree 组件并传递数据和功能参数：
-- -------------------- ---- -------
----- ----------- ------- --------- -
----- - -
----- -- -----
-
-------- -
------ -
-----
----------------------
---------------- -- --------------- ---- ---
-------------- ----- ------ --------- -------------- ------------- -- -- ---
--
--
-
-你需要传递的参数有：
tree: 你的树数据。onChange: 当树数据被修改时的回调。onMoveNode: 当树节点被拖拽移动时的回调。
Tree 组件
当你创建 Tree 组件时，你需要给它传递一个 tree 参数。这个参数是一个树的 JSON 数据，它应该长成这样：
-- -------------------- ---- -------
-
--------- -------
----------- -
-
--------- ----
------------ -----
----------- -
-
--------- ----
--
-
--------- ----
-
-
--
-
--------- ----
------------ ------
----------- -
-
--------- ----
--
-
--------- ----
-
-
-
-
-JSON 数据中的 children 字段是一个数组，它定义了子节点。每个子节点是一个 JSON 对象，其中包含一个 module 字段，它指定节点的显示文本，以及一个 children 字段，它定义了子节点。
在 Tree 组件中，你还可以用以下参数：
onChange(tree): 当树数据被修改时的回调。onMoveNode({ node, depth, parentId, prevSiblingId, nextSiblingId }): 当树节点被拖拽移动时的回调。
Tree.Node 组件
Tree.Node 组件是 Tree 的子组件，用于渲染节点。当你创建一个 Tree 组件时，你可以在树的 JSON 数据中为每个节点设置自定义属性。你可以在 Tree.Node 组件的 props 中使用这些属性。
Tree.Node 组件的 props 参数有：
node: 要渲染的节点。depth: 当前节点深度。parentId: 当前节点的父节点 ID。prevSiblingId: 前一个节点的 ID。nextSiblingId: 后一个节点的 ID。
示例代码
以下代码展示了如何使用 react-ui-tree-draggable。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---- - ---- --------------------------
----- ----------- ------- --------- -
----- - -
----- -
--------- -------
----------- -
-
--------- ----
------------ ------
----------- -
-
--------- ----
--
-
--------- ----
-
-
--
-
--------- ----
------------ ------
----------- -
-
--------- ----
--
-
--------- ----
-
-
-
-
-
-
-------- -
------ -
-----
----------------------
---------------- -- --------------- ---- ---
-------------- ----- ------ --------- -------------- ------------- -- -- ---
--
--
-
-
------ ------- ------------以上就是 react-ui-tree-draggable 的使用教程。希望这篇文章对你有所帮助，祝你编写出完美的 UI 树！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-ui-tree-draggable