前言
随着前端项目越来越复杂，前端页面中树形控件的需求越来越多。rc-sortable-tree 是一个基于 React 的开源树形控件库，具有易用、功能强大的特点。本文将介绍如何通过 npm 安装和使用 rc-sortable-tree。
安装
安装 rc-sortable-tree 可以通过 npm 安装，需要先安装 Node.js 和 npm。在终端输入以下命令：
npm install --save rc-sortable-tree
使用
引入
在 React 项目中使用 rc-sortable-tree，需要在组件中引入：
import SortableTree, { changeNodeAtPath } from 'rc-sortable-tree';
import 'rc-sortable-tree/style.css';基本用法
以下代码将生成一个简单的可排序树：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -------------------
------ -----------------------------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
--------- -
- ------ ----- --- --------- -- ------ ------ ---- -- -- --
- ------ ----- --- --------- -- ------ ------ ---- -- -- --
--
--
-
-------- -
------ -
---- -------- ------- --- ---
-------------
------------------------------
------------------ -- --------------- -------- ---
--
------
--
-
-
------ ------- -------------高级用法
rc-sortable-tree 支持拖拽排序、复制、粘贴等功能，下面是一个完整的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- - ---------------- - ---- -------------------
------ -----------------------------
----- --------------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- -
- ------ ----- --- --------- -- ------ ------ ---- -- -- --
- ------ ----- --- --------- -- ------ ------ ---- -- -- --
--
------------- -----
--
----------------- - -----------------------------
--------------- - ---------------------------
---------------- - ----------------------------
-
-------------------------- -
--------------- ------------ ---
-
------------ -
-- -------------------------- -------
----- ---------- - - -------------------------- --
--------------- ---------- ---
-
------------- -
-- ------------------------ -------
-- -------------------------- -------
----- ------- - ----------------------------------
---------------------- - -- -- --
----- ----------- - ------------------
--------- --------------------
----- -----------------------------
----------- -- --------- -- -- ----------
-------- -----------
------------
--------------- --------- ----------- ---
-
-------- -
------ -
-----
-----
------- ---------------------------------------
------- -----------------------------------------
------
---- -------- ------- --- ---
-------------
------------------------------
------------------ -- --------------- -------- ---
--------------------- ----- ---- -- -- --
------ -
---------------- ---- --- --------------------- - --------- - --------------
--
-------- -- -- ------------------- ----- ---- ---
---
--
------
------
--
-
-
------ ------- ----------------总结
rc-sortable-tree 是一个很好用的树形控件库，具有易用、功能强大的特点。在实际项目中，我们可以根据需求自由加以使用和修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6afe