在前端开发中，常常需要使用树形结构来展示数据。而在 React16 中，我们可以通过 npm 包 react16-bootstrap-treeview 来方便地展示树形结构数据。
安装
首先，我们需要在项目中安装 react16-bootstrap-treeview，可以通过以下命令进行安装：
npm install react16-bootstrap-treeview --save
使用
导入组件
要使用 react16-bootstrap-treeview，需要在你的代码中导入该组件：
import BootstrapTreeView from 'react16-bootstrap-treeview';
数据准备
使用 react16-bootstrap-treeview 展示数据需要先将数据转化为特定的格式，即将每个节点都转化为一个对象，包括节点文本内容（text）、节点标识符（nodeId）、子节点（nodes）等信息。例如：
-- -------------------- ---- -------
----- -------- - -
-
----- ------
------- --
------ -
-
----- --------
------- --
--
-
----- --------
------- --
-
-
--
-
----- ------
------- --
------ -
-
----- --------
------- --
--
-
----- --------
------- --
-
-
-
--为了方便展示，该例子中我们使用了一些简单的节点内容和节点标识符。在实际应用中，节点标识符需要根据属性 id 来确定。在后文中，我们会使用上述 treeData 来展示如何使用 react16-bootstrap-treeview。
渲染组件
完成上述准备工作后，我们可以开始渲染组件了：
-- -------------------- ---- -------
----- --------------- ------- --------------- -
-------- -
------ -
---- ----------------------
------------------ --------------- --
------
--
-
-组件属性
在渲染组件时，我们可以通过属性来控制组件的展示，常用属性主要包括以下几个：
- data：树形结构数据，需要按照特定格式进行转化。
- levels：默认展示的层数。如果省略该属性，将展示所有层数。
- expandIcon：展开节点时的图标，默认使用三角形。
- collapseIcon：收缩节点时的图标，默认使用三角形。
- nodeIcon：节点图标，可以使用 font-awesome 中的图标以及自定义图标。
- color：设置节点文本和图标的颜色。
- backColor：设置节点背景颜色。
- onNodeSelected：节点被选中时触发的回调函数。
-- -------------------- ---- -------
----- --------------- ------- --------------- -
-------------- - ---- -- -
--------------------- ----- -- ------
--
-------- -
------ -
---- ----------------------
------------------
---------------
----------
----------------- -------------------- --------------- ---
------------------- -------------------- ---------------- ---
--------------- -------------------- --------------- ---
---------------
-------------------
------------------------------------
--
------
--
-
-示例代码
以下为完整的使用示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- -----------------------------
----- -------- - -
-
----- ------
------- --
------ -
-
----- --------
------- --
--
-
----- --------
------- --
-
-
--
-
----- ------
------- --
------ -
-
----- --------
------- --
--
-
----- --------
------- --
-
-
-
--
----- --------------- ------- --------------- -
-------------- - ---- -- -
--------------------- ----- -- ------
--
-------- -
------ -
---- ----------------------
------------------
---------------
----------
----------------- -------------------- --------------- ---
------------------- -------------------- ---------------- ---
--------------- -------------------- --------------- ---
---------------
-------------------
------------------------------------
--
------
--
-
-
------ ------- ----------------使用起来非常方便，可以通过修改属性来调整组件的展示效果。同时，该组件还具有一定的扩展能力，可以通过编写特定的函数来自定义组件的样式和事件响应。总之，react16-bootstrap-treeview 是一个非常实用的 npm 包，可以大量节省前端开发的时间和成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03ee