react-json-editor-ajrm解析错误与解决方案
更新时间：2024年06月30日 09:31:15 作者：窗边的anini
由于历史原因,项目中 JSON 编辑器使用的是 react-json-editor-ajrm,近期遇到一个严重的展示错误,传入编辑器的数据与展示的不一致,这是产品和用户不可接受的,本文给大家介绍了react-json-editor-ajrm解析错误与解决方案,需要的朋友可以参考下
背景
由于历史原因，项目中 JSON 编辑器使用的是 react-json-editor-ajrm，近期遇到一个严重的展示错误，传入编辑器的数据与展示的不一致，这是产品和用户不可接受的。
工具介绍
react-json-editor-ajrm 可以用于查看、编辑和校验 JSON 对象。但这个项目已经不再积极维护，并计划在2023年6月15日废弃。
Warning: As you may already know, the react-json-editor-ajrm's orignal project is not actively maintained and that it will eventually be deprecated. So I've decided to set an official date for deprecation. The tentative date for this is June 15, 2023.
问题复现
使用官方示例
这里仅把测试数据换成能复现问题的数据（在解析嵌套带引号数据时会出问题）
export const testData = {
"key1": "{"test":"{\"name\":\"editor\"}"}",
"key2": "{"name":"editor"}",
"key3": {
"name": "editor"
}
}
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import JSONInput from "react-json-editor-ajrm/index";
import locale from "react-json-editor-ajrm/locale/en";
import { testData } from "./testData";
class App extends Component {
render() {
/**
* Rendering this JSONInput component with some properties
*/
return (
<div style={{ maxWidth: "1400px", maxHeight: "100%" }}>
<JSONInput
placeholder={testData} // data to display
theme="light_mitsuketa_tribute"
locale={locale}
colors={{
string: "#DAA520" // overrides theme colors with whatever color value you want
}}
height="550px"
onChange={(e) => {
console.log("jsoneditor-onchange-e", e);
}}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector("#root"));
渲染效果如图：
很明显能看出问题，key1、key2 的展示都跟原始数据不一致
探究原因
这是用一个常用的 JSON 格式化工具的展示效果。证明数据是没问题的，而是 react-json-editor-ajrm 内部处理逻辑导致的问题。
深入分析 react-json-editor-ajrm 源码，发现 this.tokenize 函数在处理传入数据时出现了问题。这导致了数据标记（tokens）的生成错误，进一步导致 markupText 的错误，最终影响了数据的展示。
分析链路
- render 函数中，dangerouslySetInnerHTML: this.createMarkup(markupText)
- showPlaceholder 函数中
const data = this.tokenize(placeholder);
this.setState({
prevPlaceholder: placeholder,
plainText: data.indentation,
markupText: data.markup,
lines: data.lines,
error: data.error
});
- placeholder 是传入的数据
- markupText 取自 this.tokenize(placeholder)，然后更新
- 关键在于 this.tokenize 对 placeholder 的处理，这里直接给出 this.tokenize 调用后的结果，感兴趣的可以查看源码
markup
"<span type="symbol" value="{" depth="1" style="color:#D4D4D4">{</span>
<span type="key" value="key1" depth="1" style="color:#59A5D8">key1</span><span type="symbol" value=":" depth="1" style="color:#49B8F7">:</span> <span type="string" value="'{'" depth="1" style="color:#DAA520">'{'</span><span type="" value="" depth="1" style="color:#D4D4D4"></span><span type="string" value="':'" depth="1" style="color:#DAA520">':'</span><span type="symbol" value="{" depth="2" style="color:#D4D4D4">{</span>
<span type="key" value="'name\'" depth="2" style="color:#59A5D8">'name\'</span><span type="symbol" value=":" depth="2" style="color:#49B8F7">:</span> <span type="string" value="'editor\'" depth="2" style="color:#DAA520">'editor\'</span>
<span type="symbol" value="}" depth="1" style="color:#D4D4D4">}</span><span type="key" value="'}'" depth="1" style="color:#59A5D8">'}'</span><span type="symbol" value="," depth="1" style="color:#D4D4D4">,</span>
<span type="key" value="key2" depth="1" style="color:#59A5D8">key2</span><span type="symbol" value=":" depth="1" style="color:#49B8F7">:</span> <span type="string" value="'{'" depth="1" style="color:#DAA520">'{'</span><span type="" value="" depth="1" style="color:#D4D4D4"></span><span type="string" value="':'" depth="1" style="color:#DAA520">':'</span><span type="" value="" depth="1" style="color:#D4D4D4"></span><span type="string" value="'}'" depth="1" style="color:#DAA520">'}'</span><span type="symbol" value="," depth="1" style="color:#D4D4D4">,</span>
<span type="key" value="key3" depth="1" style="color:#59A5D8">key3</span><span type="symbol" value=":" depth="1" style="color:#49B8F7">:</span> <span type="symbol" value="{" depth="2" style="color:#D4D4D4">{</span>
<span type="key" value="name" depth="2" style="color:#59A5D8">name</span><span type="symbol" value=":" depth="2" style="color:#49B8F7">:</span> <span type="string" value="'editor'" depth="2" style="color:#DAA520">'editor'</span>
<span type="symbol" value="}" depth="1" style="color:#D4D4D4">}</span>
<span type="symbol" value="}" depth="0" style="color:#D4D4D4">}</span>"
解决方案
由于这是 react-json-editor-ajrm 内部处理逻辑导致的，所以只能考虑更换依赖包。
调研发现可以使用 jsoneditor-react，这里给出简单的示例：
import { JsonEditor as Editor } from 'jsoneditor-react';
import 'jsoneditor-react/es/editor.min.css';
import React from 'react'
import { testData } from './testData';
function App() {
return (
<Editor
value={testData}
onChange={(val) => {
console.log("jsoneditor-react-val", val);
}}
/>
)
}
export default App
项目启动后，发现展示是符合预期的，也没有别的问题，可以使用 jsoneditor-react 作为替换的三方包。
工具对比
react-json-editor-ajrm vs jsoneditor-react
https://npmtrends.com/jsoneditor-react-vs-react-json-editor-ajrm
在 npmtrends.com/ 中对两个工具的下载趋势进行了对比
| pkg | 简介 | star | 地址 |
|---|---|---|---|
| react-json-editor-ajrm | A stylish, editor-like, modular, react component for viewing, editing, and debugging javascript object syntax! | 354 | https://github.com/AndrewRedican/react-json-editor-ajrm |
| jsoneditor-react | react wrapper implementation for jsoneditor | 262 | https://github.com/vankop/jsoneditor-react |
| jsoneditor | - | 11.3k | https://github.com/josdejong/jsoneditor |
虽然从下载量以及 GitHub star 数量来看，jsoneditor-react 并不如 react-json-editor-ajrm，但 jsoneditor-react 是基于 jsoneditor 二次封装的，所以稳定性还是有一定的保障。
以上就是react-json-editor-ajrm解析错误与解决方案的详细内容，更多关于react-json-editor-ajrm错误的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了浅谈react前后端同构渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文主要介绍了React配置子路由的实现，我们来通过一个简单的例子解释一下如何配置子路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家介绍了React调度系统Scheduler工作原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
解决React报错Cannot find namespace context
这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法2022-11-11
本文主要介绍了React 中更新队列 updateQueue的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-05-05
本文将从最基础的项目搭建开始讲起，做一个基于react和antd的后台管理系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家介绍了React.memo函数中的参数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
React Hooks的出现彻底改变了函数组件的编写方式,使我们能够在不编写class的情况下使用state和其他React特性,自定义Hooks作为 Hooks机制的高级应用,允许开发者将可复用的逻辑封装成独立的函数,本文将深入探讨自定义 Hooks 的设计原则、实战技巧以及常见陷阱2025-09-09
本篇文章主要介绍了React-Native左右联动List的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论