介绍
@dr-kobros/react-jsoneditor 是一款基于 React 的可扩展 JSON 编辑器，具有可定制化 UI 和很强的交互性。该 npm 包适用于在前端开发中，帮助用户方便地编辑 JSON 格式的数据对象。
安装
在使用 @dr-kobros/react-jsoneditor 之前，首先需要安装该包：
npm install @dr-kobros/react-jsoneditor --save
安装后，可以引入组件并开始使用：
import JsonEditor from "@dr-kobros/react-jsoneditor"; import "@dr-kobros/react-jsoneditor/dist/index.css";
使用
@dr-kobros/react-jsoneditor 将 JSON 数据对象封装为了 React 组件 <JsonEditor>，这样我们可以像使用其它 React 组件那样来使用它。
<JsonEditor
value={jsonValue}
onChange={onChange}
/>属性
在使用 <JsonEditor> 组件时，我们可以使用以下属性对编辑器的展示和功能进行设置。
value
数据对象的默认值。
value={
{
"name": "John",
"age": 30,
"city": "New York"
}
}onChange
当编辑器中的数据发生变化时，会触发该回调函数并传递新的 JSON 对象。
function onChange(newValue) {
console.log("newValue", newValue);
}schema
通过 schema 属性来定义 JSON 数据对象的 schema，进而限制用户的输入范围。
-- -------------------- ---- -------
----- ------ - -
----- ---------
----------- -
----- ------ ----------
---- ------ ----------
-------- -
----- ---------
----------- -
------- ------ ----------
----- ------ ----------
------ ------ ----------
---- ------ ---------
-
--
------------- -
----- --------
------ ---------------
------ -
----- ---------
----------- -
--------- ------ ----------
------------ ------ ---------
-
-
-
-
--
-----------
-----------------
-------------------
---------------
--theme
编辑器的主题样式。
<JsonEditor
value={jsonValue}
onChange={onChange}
theme="dark"
/>locale
编辑器的本地化语言。
<JsonEditor
value={jsonValue}
onChange={onChange}
locale="cn"
/>history
编辑器的历史记录，通过 ctrl + z 和 ctrl + y 来撤销和重做。
<JsonEditor
value={jsonValue}
onChange={onChange}
history={true}
/>方法
<JsonEditor> 组件还提供了一些有用的方法来支持定制化开发。
getJsonValue
获取当前 JSON 数据对象的值。
-- -------------------- ---- ------- -------- --------------- - ----- --------- - --------------------------------- ----------------- -------- ----------- - ----------- --------------- ----------------- ------------------- -- ------- -------------------------- ---- -----------
setJsonValue
设置 JSON 数据对象的值。
-- -------------------- ---- -------
-------- --------------- -
--------------------------------
------- --------
------ ---
------- -------
---
-
-----------
---------------
-----------------
-------------------
--
------- -------------------------- ---- -----------总结
@dr-kobros/react-jsoneditor 是一款可定制化的 React JSON 编辑器，提供了一系列属性和方法帮助用户编辑 JSON 数据对象。借助该 npm 包，我们可以十分方便地在前端开发中对 JSON 对象进行操作和展示。
示例代码：https://codesandbox.io/s/@dr-kobros/react-jsoneditor-9fu22？file=/src/App.js
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e067a