介绍
Freetree 是一个基于 React 的树形控件组件库，具有可自定义的节点展开/折叠动画、多选、拖拽等功能。
安装
在项目中使用 npm 安装 Freetree：
npm install freetree
然后在项目中引用 Freetree：
import Freetree from 'freetree';
使用
基本使用
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ---- -----------
----- ---- - -
-
--- --
----- ----- ---
--------- -
-
--- --
----- ----- -----
--------- --
--
-
--- --
----- ----- -----
--------- -
-
--- --
----- ----- -------
--------- --
-
-
-
-
-
--
------------------------- ----------- --- ---------------------------------属性
data：树形数据，必填。collapsed：默认展开状态，true为收起（默认）,false为展开。onToggle：节点展开/折叠时触发的回调函数。onCheck：节点选中状态变化时触发的回调函数。dropHandler：节点拖拽完成后触发的回调函数。
自定义节点组件
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ---- -----------
----- ---- - -
-
--- --
----- ----- ---
--------- -
-
--- --
----- ----- -----
--------- --
--
-
--- --
----- ----- -----
--------- -
-
--- --
----- ----- -------
--------- --
-
-
-
-
-
--
----- -------- - -- ----- --------- ------- -- -- -
------ -
-----
------------------------
------- ----------- -- ------------------------------
------ --------------- ---------------------- ------------ -- -------------- --
------
-
-
----------------
--------- ----------- --------------- ---
-------------------------------
--节点拖拽
Freetree 支持节点的拖拽功能，在使用前需安装 react-dnd和 react-dnd-html5-backend 两个依赖。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ---- -----------
------ - ----------- - ---- ------------
------ ------------ ---- --------------------------
----- ---- - -
-
--- --
----- ----- ---
--------- -
-
--- --
----- ----- -----
--------- --
--
-
--- --
----- ----- -----
--------- -
-
--- --
----- ----- -------
--------- --
-
-
-
-
-
--
----- ---------- - -- ----- ----- --------- -------- ----------- -- -- -
------ -
------------ -----------------------
---------
-----------
-----------
-------------------
-----------------
-------------------------
--
--------------
-
-
----------------
-----------
-----------
---------------
---------------- -- ------------------
--------------- -- ------------------
----------------------- --------- -- -------------- ---------------- --- -------------------
---
-------------------------------
--结语
Freetree 是一个非常好用的树形控件组件库，具有可自定义的节点展开/折叠动画、多选、拖拽等功能，使用起来也十分简单。希望这篇文章能给大家带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f13cea4403f2923b035c2ca