在React、Vue中使用vanilla-jsoneditor

一、使用vanilla-jsoneditor的场景

在开发过程中，我们经常需要处理和编辑JSON数据。vanilla-jsoneditor是一个简单而强大的JSON编辑器，可用于在React或Vue中创建和管理JSON数据。在本篇文章中，我们将介绍如何将vanilla-jsoneditor与React Hooks，或者将vanilla-jsoneditor与Vue一起使用。

1. 安装依赖

1.1 安装vanilla-jsoneditor和React

如果你的项目是使用React进行开发的，首先，确保您的项目中已经安装了React和vanilla-jsoneditor。您可以使用npm或yarn进行安装：

/* 使用npm安装依赖 */
npm install -g create-react-app
create-react-app app-test
cd app-test
npm install vanilla-jsoneditor

若项目使用yarn进行包管理，可以通过一下方式安装

/* 使用yarn安装依赖 */
yarn add react
create-react-app app-test
cd app-test
yarn add vanilla-jsoneditor

1.1 安装vanilla-jsoneditor和Vue

同理，如果你的项目是使用React进行开发的，首先，确保您的项目中已经安装了React和vanilla-jsoneditor。您可以使用npm或yarn进行安装：

/* 使用npm安装依赖 */
npm create vue@latest
cd <your-project-name>
npm install vanilla-jsoneditor

若项目使用yarn进行包管理，可以通过一下方式安装

/* 使用yarn安装依赖 */
yarn dlx create-vue@latest
cd <your-project-name>
yarn add vanilla-jsoneditor

2. 创建一个component组件

我们首先创建一个公共的componet，方便我们在需要的Page中快速调用（注意：可根据页面，对jsonEditor容器样式进行调整，以适配自己的页面布局）

2.1 React创建一个新的组件，用于渲染vanilla-jsoneditor编辑器

import {
    JSONEditor } from 'vanilla-jsoneditor';
import React, {
    useEffect, useRef, useState } from 'react';
import styles from './styles.css';

const VanillaJSONEditor = props => {
   
  const refContainer = useRef(null);
  const refEditor = useRef(null);
  const [sizeClasssName, setSizeClassName] = useState('default');

  useEffect(() => {
   
    // create editor
    refEditor.current = new JSONEditor({
   
      target: refContainer.current,
      props: {
   },
    });
    setSizeClassName(props.sizeClasssName);
    return () =>