前言
在前端开发中，我们经常需要处理 JSON 数据、展示 JSON 数据以及对 JSON 数据进行编辑等操作。而 react-jsoneditor 是一个基于 React 的 JSON 编辑器，它支持用户对 JSON 数据进行查看、编辑、验证、格式化等功能。因此，它成为开发者处理 JSON 数据的好帮手。
本文将详细介绍如何使用 npm 包 react-jsoneditor，包括安装和基本用法，重点讲解其主要的 API 和使用技巧。
安装 react-jsoneditor
在使用 react-jsoneditor 之前，需要安装它。安装方式很简单，可以采用 NPM 或 Yarn，二者的安装命令如下：
# 使用 NPM 安装 react-jsoneditor npm install react-jsoneditor # 使用 Yarn 安装 react-jsoneditor yarn add react-jsoneditor
安装完成后，就可以在项目中引入它了。
使用 react-jsoneditor
引入 react-jsoneditor 的方式有两种，一种是直接引入它的组件，另一种是引入它的 CSS 样式文件。
引入组件
在需要使用 react-jsoneditor 的组件中，可以采用以下方式引入：
import ReactJson from 'react-jsoneditor';
import 'react-jsoneditor/dist/jsoneditor.min.css';
function App() {
return <ReactJson />;
}上面代码中，我们通过 import 引入了 react-jsoneditor 组件，并在后面引入了它的 CSS 样式文件。
基本用法
react-jsoneditor 提供了三个 PropTypes：value（必选）、onChange（可选）和 options（可选）。
我们来看下面的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- -------------------
------ -------------------------------------------
-------- ----- -
----- ---------- ------------ - ----------
---------- -------
--------- ------
---- ---
---
-- -- ---- -------
----- -------------------- - ------- -- -
-------------------
--
------ -
----------
---------------- -- --
------------------------------- -- --
---------- ----- ------ -- -- --
--
--
-在上述示例中，我们创建了一个名为 App 的函数，在函数中使用了 useState Hook 来维护 JSON 数据的变化。同时我们还创建了一个名为 handleJsonDataChange 的函数来处理 JSON 数据的变化。
最后，我们将上述两个函数和 ReactJson 组件一起使用，其中：
value是必填项，它的值为当前 JSON 数据；onChange为可选项，当 JSON 数据发生变化时，会触发该函数，并将 JSON 数据的新值传递给它；options为可选项，可以配置 JSON 编辑器的模式，支持的模式有：view、form和tree，默认为tree。
以上就是 react-jsoneditor 的基本用法，接下来我们将对它的主要 API 进行详细讲解。
API
| API | 类型 | 描述 |
|---|---|---|
| value | JSON 或者 Object | 当前 JSON 数据 |
| onChange | Function | JSON 数据发生变化时调用的函数 |
| options | Object | 配置 JSON 编辑器属性的对象 |
| isValid | Boolean | 当前 JSON 数据是否有效 |
| getJson | Function | 获取当前 JSON 数据 |
| setJson | Function | 设置当前 JSON 数据 |
| updateJsonAt | Function | 更改当前 JSON 数据 |
| deleteJsonAt | Function | 删除当前 JSON 数据 |
options
options 是一个对象，用于配置 JSON 编辑器。
支持配置的属性如下：
- mode：JSON 编辑器的模式，默认为
tree，支持的模式有：view、form和tree。 - name：JSON 编辑器顶部的名称；
- search：是否显示搜索框；
- onChange：JSON 数据发生变化时调用的函数；
- onError：当 JSON 解析失败时调用的函数；
- onModeChange：模式变化时调用的函数；
- onValid：JSON 数据校验成功时调用的函数；
- onInvalid：JSON 数据校验失败时调用的函数；
- sortObjectKeys：Object 对象的排序方法，可选值：
ASC和DESC。
下面是一个示例，演示了如何使用 options：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ -------------------------------------------
-------- ----- -
----- ---------- ------------ - ----------
---------- -------
--------- ------
---- ---
---
----- -------------------- - ------- -- -
-------------------
--
------ -
----------
----------------
----------
----- -------
----- --- ---- --------
------- -----
--------- ---------------------
-------- -- -- ----------------- ---------
---------- -- -- ----------------- ---------
--
--
--
-在上述示例中，我们将 JSON 编辑器的模式设置为 form，同时还配置了顶部名称、是否显示搜索框以及 JSON 数据发生变化和校验成功、失败时的回调函数。
除了上述属性之外，options 还支持传递其他属性，详见 official documentation。
getJson 和 setJson
getJson 和 setJson 分别用于获取和设置当前 JSON 数据，示例代码如下所示：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ -------------------------------------------
-------- ----- -
----- ---------- ------------ - ----------
---------- -------
--------- ------
---- ---
---
-- ---- ---- --
----- ----------------- - -- -- -
----- ---- - -------------------------
--------------- ---- ----- ------
--
-- ---- ---- --
----- ----------------- - -- -- -
----- ------- - -
-------- --------
----- ----------
----- -------------
--
--------------------------------
--
------ -
----------
----------------
--------------- -- -------------- - --------- -- ------
--
--
-在上述示例中，我们通过 ref 属性引用了组件实例，并使用 getJson 方法获取组件实例的当前 JSON 数据，使用 setJson 方法设置了新的 JSON 数据。
updateJsonAt 和 deleteJsonAt
updateJsonAt 和 deleteJsonAt 分别用于更改当前 JSON 数据和删除 JSON 数据。
下面是一个示例，演示了如何使用这两个 API：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ -------------------------------------------
-------- ----- -
----- ---------- ------------ - ----------
---------- -------
--------- ------
---- ---
---
-- ---- ---- --
----- -------------------- - -- -- -
----- ----------- - - ------------ ---- -- --
---------------------------------- - --------- --- --------- -- ---
-------------------------
--
-- -- ---- --
----- -------------------- - -- -- -
----- ----------- - - ----------- --
------ ----------------
-----------------------------------
-------------------------
--
------ -
----------
----------------
--------------- -- -------------- - ---------
-
--- ------ ---
------- ------------------------------------- ---- -------------
------- ------------------------------------- ---- -------------
------------
--
-在上述示例中，我们使用了 updateJsonAt 方法更改了 JSON 数据的 age 属性，并使用 deleteJsonAt 方法删除了 JSON 数据的 age 属性。
结语
上述就是我们对 npm 包 react-jsoneditor 的详细讲解，我们介绍了如何安装、引入和使用 react-jsoneditor，重点讲解了它的主要 API。希望通过本文的学习，可以帮助大家更好地使用 react-jsoneditor 进行 JSON 数据的展示、编辑及校验等工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bd481e8991b448d9780