简介
object-json-tree 是一个基于 React 的组件，能够将 JSON 数据转化为树形结构的展示形式。它可以很方便地用于前端开发调试中，对 JSON 数据进行可视化展示和查看。在复杂的数据结构中，以树形的方式呈现会更加直观明了。本文将详细介绍如何使用 object-json-tree 包。
安装
首先，需要在项目中安装 object-json-tree 包。可以通过 npm 进行安装：
$ npm install object-json-tree
安装完成后，引入包：
import ObjectJsonTree from 'object-json-tree';
基本使用
下面是基本的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
----- ----------- - -- -- -
----- ---------- - -
--------- ----------
------- -
------- -
----- -------
------- -------
-------- ------------------
--
---------- -
------ -----
--------- -------
----------- ------------
-
-
--
------ -
-----
--------------- ----------------- --
------
--
--
------ ------- ------------Props
ObjectJsonTree 组件支持以下不同的 Props：
data: [必选] 需要展示成树形的数据。必须为对象或数组类型。shouldExpandNode: [可选] 支持函数或者对象类型，用来启用或禁用节点的初始展开状态。hideRoot: [可选] 开启此选项，可以隐藏树形结构的根节点，将展示数据的节点作为根节点。getRootValue: [可选] 开启此选项，可以手动指定根节点展示的值。expandLevel: [可选] 支持字符串或者数字类型，用来设置展开所需的级别。onClick: [可选] 点击节点 callback 函数。
高级使用
以下是高级使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
----- ----------- - -- -- -
----- ---------- - -
--------- ----
---------- -----
------- -
------- -
----- ---
------- -------
------ ---
---------- -
-------- ---- ---- ----
-------- ---
------- ---- -----------
-------- -----
------ -----
--
-------- -------------------
--------------- -
-
------- -------
--------- ----------
--
-
------- -------
--------- --------------
-
-
-
-
--
----- ---------------- - --------- ----- ------ -- -
-- ------ --- -- ------ -----
-- ------- ------------- --- --------- ------ ------
------ -------------------- -- --
--
----- ------------ - ------- -- -
--------------- -
---- ---------
------ ----- -------------- -------------------------
---- ----------
------ ----- -------------- --------------------------
--------
------ --------
-
--
----- ----------- - ------- -- -
-- -------- --- -------- -- ------- --- ------ ------ ---------
-- -------- --- -------- ------ --------
-- -------- --- --------------- ------ --------
-- -------- --- ------- ------ -------
------ -----
--
----- ------- - ---- -- -
-------------------- --------------------------
--
------ -
-----
---------------
-----------------
-----------------------------------
---------------------------
-------------------------
-----------------
--
------
--
--
------ ------- ------------这个例子演示了如何自定义节点的展开状态、节点的类型、节点的图标以及点击节点后的回调函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e2283