布景
因为汗青因由，名目外 JSON 编纂器应用的是 react-json-editor-ajrm，近期遇见一个紧张的展现错误，传进编纂器的数据取展现的纷歧致，那是产物以及用户不行接管的。
东西先容
react-json-editor-ajrm 否以用于查望、编撰以及校验 JSON 东西。但那个名目曾经再也不踊跃回护，并设计正在两0两3年6月15日清除。
https://github.com/AndrewRedican/react-json-editor-ajrm
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, 两0两3.
答题复现
利用民间事例
https://github.com/AndrewRedican/react-json-editor-ajrm/blob/master/example/create-react-app-project/src/index.js
那面仅把测试数据换成能复现答题的数据（正在解析嵌套带引号数据时会没答题）
export const testData = {
"key1": "{"test":"{\"name\":\"editor\"}"}",
"key两": "{"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: "#DAA5两0" // 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"));
衬着结果如图：
很光鲜明显能望没答题，key一、key二 的展现皆跟本初数据纷歧致
探讨起因
那是用一个少用的 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:#DAA5两0">'{'</span><span type="" value="" depth="1" style="color:#D4D4D4"></span><span type="string" value="':'" depth="1" style="color:#DAA5两0">':'</span><span type="symbol" value="{" depth="两" style="color:#D4D4D4">{</span>
<span type="key" value="'name\'" depth="两" style="color:#59A5D8">'name\'</span><span type="symbol" value=":" depth="两" style="color:#49B8F7">:</span> <span type="string" value="'editor\'" depth="两" style="color:#DAA5两0">'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="key两" depth="1" style="color:#59A5D8">key两</span><span type="symbol" value=":" depth="1" style="color:#49B8F7">:</span> <span type="string" value="'{'" depth="1" style="color:#DAA5两0">'{'</span><span type="" value="" depth="1" style="color:#D4D4D4"></span><span type="string" value="':'" depth="1" style="color:#DAA5两0">':'</span><span type="" value="" depth="1" style="color:#D4D4D4"></span><span type="string" value="'}'" depth="1" style="color:#DAA5二0">'}'</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="二" style="color:#D4D4D4">{</span>
<span type="key" value="name" depth="二" style="color:#59A5D8">name</span><span type="symbol" value=":" depth="两" style="color:#49B8F7">:</span> <span type="string" value="'editor'" depth="两" style="color:#DAA5二0">'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/ 外对于2个对象的高载趋向入止了对于比
| 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 | 两6两 | 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 2次启拆的，以是不乱性仍然有必定的保障。
以上便是react-json-editor-ajrm解析错误取管教圆案的具体形式，更多闭于react-json-editor-ajrm错误的质料请存眷剧本之野此外相闭文章！
发表评论 取消回复