前言
在前端开发过程中，JavaScript 程序员已经习惯了使用许多库来完成一些功能。npm 包不断地被发布，以满足我们的需求。其中，我们经常会遇到需要在网页上渲染 JSON 数据的情况。而 react-json-view-callback 就是一款能够展示 JSON 数据的 React 组件，并且支持交互元素以及传递回调函数，可作为数据展示工具。
安装
可以使用 npm 安装 react-json-view-callback：
npm i react-json-view-callback
使用
基础用法
-- -------------------- ---- -------
------ ------------- ---- ---------------------------
----- --- - -- -- -
----- ---- - -
---- ----
---- ------ -------
---- - ----- ------- --
---- --- -- ---
-
------ -
-------------- ---------- --
--
-以上示例渲染了一个 JSON 数据，输出如下：
向组件传递 JSON 数据可以使用 src 属性。在这种情况下，只需要这样做就可以展示 JSON 数据。
操作回调
react-json-view-callback 组件还支持一些可选的回调函数来检测组件的操作。比如当用户点击某个 key 或 value 时，组件会执行回调函数。
-- -------------------- ---- -------
------ ------------- ---- ---------------------------
----- --- - -- -- -
----- ---- - -
---- ----
---- ------ -------
---- - ----- ------- --
---- --- -- ---
-
----- -------- - ----- ------- ------ ---- -------- ------- -- -
----------------- ---- -------- -- ------ ----- -------------
-
----- ----------- - ----- ------- ------ ---- ----------- ------- -- -
----------------- ------- -------- -- ------ ----- ----------------
-
------ -
--------------
----------
-------------------
-------------------------
--
--
-在这个例子中，我们定义了两个回调函数 onAddKey 和 onDeleteKey，它们都接收三个参数：key，value 和 addType 或 deleteType (例如：'Add', 'Edit' 或 'Delete')。这些回调函数将在用户进行某些操作时被触发，并输出一些信息到控制台。
当你展开并编辑一个 JSON 子对象时，然后按下 ESC 或按下左上角的 “Back” 按钮，react-json-view-callback 组件也会触发一个回调函数。
-- -------------------- ---- -------
------ ------------- ---- ---------------------------
----- --- - -- -- -
----- ---- - -
---- ----
---- ------ -------
---- - ----- ------- --
---- --- -- ---
-
----- ------ - ------ ---- -- -
------------------
-
------ -
--------------
----------
---------------
--
--
-在这个例子中，我们定义了一个回调函数 onEdit，它有一个参数 edit ，数据类型为对象。这个参数包含新的数据以及旧的数据，因此你可以比较两个数据集以获取更多关于操作的信息。
嵌套对象和数组
react-json-view-callback 组件不仅支持显示嵌套的对象，还支持显示数组。并且这些对象和数组也支持编辑。
-- -------------------- ---- -------
------ ------------- ---- ---------------------------
----- --- - -- -- -
----- ---- - -
---- ----
---- ------ -------
---- -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
--
-
----- ------ - ------ ---- -- -
------------------
-
------ -
--------------
----------
---------------
--
--
-以上代码将渲染如下的 JSON 数据：
你还可以通过传递一个名为 collapsed 的布尔值来控制对象是否默认处于折叠状态：
-- -------------------- ---- -------
------ ------------- ---- ---------------------------
----- --- - -- -- -
----- ---- - -
-- ----
-- -
-- ----
-- --- -- ---
--
-
------ -
--------------
----------
----------------
--
--
-以上代码将渲染如下的 JSON 数据：
总结
本教程介绍了如何使用 react-json-view-callback 组件来渲染和编辑 JSON 数据，并在用户执行某些操作时触发回调函数。同时还展示了如何处理嵌套对象和数组。希望这篇文章能对初学者和想要在项目中使用 react-json-view-callback 组件的开发者提供一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd081e8991b448dd5c1