把后端返回的json数据格式化显示在页面上，类似json.cn

今天老大提了一个需求，想要做一个按钮点击后出现一个类似于json.cn代码格式化,把后端返回给你的一个json数据格式化以后显示在页面上，经高人指点知道了这样一个jsoneditor模块

一.介绍

JSON编辑器是基于Web的工具，用于查看，编辑，格式化和验证JSON。 它具有多种模式，例如树编辑器，代码编辑器和纯文本编辑器。

该编辑器可以用作您自己的Web应用程序中的组件。 该库可以作为CommonJS模块，AMD模块或常规javascript文件加载。

支持的浏览器：Chrome，Firefox，Safari，Opera，Edge，Internet Explorer 11。

二.安装

npm install jsoneditor

可以npm安装，也可以直接引用cdn，或者下载下来再引用。

// 为了在我们的web应用中实现JSONEditor，我们需要载入css和js文件
<link href="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.js"></script>

// 获取更多详细的错误信息
<script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>

//上面提到支持多种modes，而其中的code mode比较特别，需要依赖于Ace editor, JSON Editor comes with a custom built version of Ace containing the ace modules ace.js, ext-searchbox.js, mode-json.js, theme-textmate.js, and a custom theme theme-jsoneditor.js。除了载入ace.js之外，我们还需要在js代码中设置mode，就像下面给出的实例中所示。
<script src="https://cdn.bootcss.com/jsonlint/1.6.0/jsonlint.min.js"></script>

三.react里使用

import React, { Component } from 'react';
import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css'
import 'jsoneditor/dist/jsoneditor.min.js'

export default class TopicCards extends Component {
    constructor(props) {
        super(props);
        this.json_Editor = React.createRef();
        this.state = ｛｝
    }
    // Json编辑器
    jsonEditor = (e) => {
        console.log(e)
        // create the editor
        const container = this.json_Editor.current;
        container.innerHTML=""
        const jsonOptions  = {
            mode: 'tree',
            modes: ['code', 'form', 'text', 'tree', 'view'],
            onError: function(err) {
                alert(err.toString());
            }
        }
        const editor = new JSONEditor(container, jsonOptions)

        // set json
        const initialJson = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World"
        }
        editor.set(initialJson)

        // get json
        // eslint-disable-next-line no-unused-vars
        const updatedJson = editor.get()
    }
    render () {
        return (
            <div className="container">
            	<button  onClick={() => this.jsonEditor()}>查看</button>
                <div id="jsonEditor" ref={this.json_Editor}>
                </div>
            </div>
        )


    }
}