react实现json框

bulucc

已于 2023-05-10 16:16:03 修改

阅读量1.4k

点赞数

文章标签： react.js json javascript

于 2023-05-10 15:37:16 首次发布

本文链接：https://blog.csdn.net/bulucc/article/details/130601848

版权

1、react-json-editor-ajrm

import React, {useState} from 'react';
import ReactJson from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/zh-cn';


export default function test() {
    const [data, setData] = useState<any>({"type": 1});
    console.log(data);
    return (
        <>
            <div>
                <ReactJson
                    locale={locale}
                    placeholder={data}
                    confirmGood={false}
                    onKeyPressUpdate={true}
                    theme="light_mitsuketa_tribute"
                    style={{
                    outerBox: { height: "auto", maxHeight: "350px", width: "100%" },
                    container: {
                        height: "auto",
                        maxHeight: "350px",
                        width: "100%",
                        overflow: "scroll"
                    },
                    body: { minHeight: "45px", width: "100%" }
                    }}
                    onChange={(v: any) => setData(v)}  
                />
            </div>
        </>

    );
}

效果：

2、@monaco-editor/react

import React, {useState} from 'react';
import Editor from "@monaco-editor/react";


export default function AITool() {
    const data = {
        "type": 1,
        "range": {
          "prefix": "D",
          "start": 21000,
          "length": 276
        },
        "holding": {
          "address": "D20005",
          "value": 1
        },
        "done": [1]
      };
    const [error, setError] = useState<any>(null);
    const [json, setJson] = useState(JSON.stringify(data, null, 2));
    const handleEditorChange = (value: any, event: any) => {
        console.log("hi", event, value);
        try {
            JSON.parse(value);
            console.log(value);
            setJson(value);
            setError(null);
        } catch (error) {
          setError('非法json, 请检查并修正');
        }
    };

    return (
        <>
            <div>
                {error && <div>{error}</div>}
                <div>
                    <Editor
                        height="90vh"
                        defaultLanguage="json"
                        defaultValue={json}
                        onChange={handleEditorChange}
                    />
                </div>
            </div>
        </>

    );
}

效果：