React JSON Editor 使用指南 | 快速上手教程 - 常规

要使用 react-json-editor，您需要按照以下步骤进行操作：

安装必要库

首先，确保您的项目中已经安装了 React 和 React-dom。如果没有，请在项目根目录中运行以下命令来安装它们：
```
npm install react react-dom
```
接下来，您需要安装 react-json-editor 包。在项目根目录中运行以下命令：
```
npm install react-json-editor
```

导入组件

在您的 React 组件中，导入 react-json-editor 组件：

import ReactJson from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';

使用组件

在您的组件中，使用 ReactJson 组件并传递一个 JSON 对象和一些其他属性：

class MyComponent extends React.Component {
  render() {
    const json = {
      'key1': 'value1',
      'key2': 'value2',
      'key3': {
        'nestedKey': 'nestedValue'
      }
    };

    return (
      <ReactJson
        src={json}
        theme='monokai'
        iconStyle='square'
        style={{ padding: '30px' }}
        locale={locale}
        displayDataTypes={false}
        displayObjectSize={false}
      />
    );
  }
}

在这个例子中，我们传递了一个 JSON 对象作为 src 属性，指定了主题为'monokai'，图标样式为'square'，设置了一些内联样式，使用了英文本地化，禁用了数据类型和对象大小的显示。

渲染组件

在您的应用程序中使用 MyComponent 组件：

ReactDOM.render(<MyComponent />, document.getElementById('root'));

运行应用程序

运行您的应用程序，您应该能够看到一个可交互的 JSON 编辑器，显示了您传递的 JSON 对象。

这就是使用 react-json-editor 的基本步骤。您可以根据需要调整属性和样式来满足您的需求。