vanilla-jsoneditor组件在react类组件中怎么使用

`vanilla-jsoneditor`是一个轻量级的JSON编辑器，可以在React类组件中通过简单的配置和渲染来集成。以下是使用它的基本步骤：

1. 首先，你需要安装它：

   npm install vanilla-jsoneditor

2. 在你的React类组件中，导入`vanilla-jsoneditor`模块和可能需要的样式文件：

   import JsonEditor from 'vanilla-jsoneditor';
   import 'vanilla-jsoneditor/dist/jsoneditor.css';

3. 创建一个state来存储JSON数据，比如初始化为空对象：

   class MyComponent extends React.Component {
     state = {
       json: {},
     };
   }

4. 在组件的生命周期方法或render()方法中，创建并初始化JsonEditor实例：

   render() {
     const onChange = (newJson) => this.setState({ json: newJson });

     return (
       <div>
         <JsonEditor
           value={this.state.json}
           options={{
             theme: 'bootstrap3', // 或者选择其他主题
             modes: ['text', 'json'],
             modeText: 'JSON',
             disableArrayMove: true,
             onChange: onChange, // 当JSON变化时触发的回调
           }}
         />
       </div>
     );
   }

这里设置了一些选项，如使用的主题、允许的模式以及当JSON内容改变时更新state的函数。

5. 最后，记得给组件添加适当的CSS样式，如果你是从cdn引入的，可能还需要处理样式加载的问题。

6. 如果你想在组件卸载前关闭编辑器，可以添加一个componentWillUnmount方法来清理：

   componentWillUnmount() {
     if (this.editor) {
       this.editor.destroy();
     }
   }