使用react-codemirror2和react-jsonschema-form也非常相似https://mozilla-services.github.io/react-jsonschema-form/
,开始了一个新项目。但是,当我的代码镜像编辑器呈现JSON时,我会将所有节目加载在一行上。我已经遍历了https://mozilla-services.github.io/react-jsonschema-form/的源代码,找不到与我现有的任何东西。
我的源代码:
import React, { useEffect, useState } from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import "codemirror/mode/javascript/javascript.js";
// components
const CodeEditorContainer = ({ code, onChange }) => {
const [codeEditorState, setCodeEditorState] = useState();
useEffect(() => {
setCodeEditorState(code);
}, [code]);
const cmOptions = {
theme: "default",
height: "auto",
viewportMargin: Infinity,
mode: {
name: "javascript",
json: true,
statementIndent: 2
},
lineNumbers: true,
lineWrapping: true,
indentWithTabs: false,
tabSize: 2
};
return (
<div className="panel panel-default">
<div className="panel-heading">Schema Editor</div>
<CodeMirror
value={codeEditorState}
options={cmOptions}
autoCursor={false}
onChange={(editor, data, value) => onChange(value)}
/>
</div>
);
};
export default CodeEditorContainer;
编辑:问题是我将JSON解析为字符串而不是
的方式 JSON.stringify(json)
我用过
JSON.stringify(json, null, 2)
答案 0 :(得分:0)
问题是我将JSON解析为字符串而不是
的方式 JSON.stringify(json)
我用过
JSON.stringify(json, null, 2)