jsoneditor二次封装实时预览json编辑器组件react版

为了方便大家使用 JSON 编辑器组件，可以对 jsoneditor 进行二次封装。下面是关于如何实现 jsoneditor 的二次封装的详细攻略。

准备工作

在开始实现之前，我们需要做一些准备工作:

1. 安装依赖：在项目根目录下运行以下命令安装所需依赖：

npm install jsoneditor react

1. 引入样式：在index.js 文件中引入样式

import 'jsoneditor/dist/jsoneditor.css';

相应的，可以在需要使用 json 编辑器的页面中引入 css 样式。

实现过程

封装 json 编辑器组件

色绘制 json 编辑器组件，我们需要编写一个 React 组件。代码如下：

import React, { useRef, useEffect } from 'react';
import JSONEditor from 'jsoneditor';

const JsonEditor = ({ value, onChange }) => {
  const editorRef = useRef(null);

  useEffect(() => {
    const editor = new JSONEditor(editorRef.current, {
      onChangeJSON: onChange,
      mode: 'tree',
      modes: ['tree', 'code'],
      ace: window.ace,
      onError: (error) => {
        console.log(error);
      },
    });

    editor.set(value);

    return () => {
      editor.destroy();
    };
  }, []);

  return <div ref={editorRef} />;
};

export default JsonEditor;

这个组件接收两个参数：value 和 onChange。其中 value 是一个 JSON 对象，代表着当前编辑器中的 JSON 数据，onChange 是一个回调函数，当编辑器中的 JSON 数据发生改变时会触发该函数，并将最新的 JSON 数据作为参数传入该函数。

这个组件被呈现为一个空的 div 元素，该元素通过 editorRef 引用，使我们可以在组件挂载后获得 JSON 编辑器实例并添加相应的监听器。useEffect 钩子函数 run 一次且只有在组件挂载后才执行，因此我们可以将它作为初始化 jsoneditor 编辑器的地方。

使用组件

接下来，我们就可以在需要使用 jsoneditor 的页面中，使用封装好的 json 编辑器组件。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import JsonEditor from './JsonEditor';

const App = () => {
  const [data, setData] = useState({});

  const handleJsonChange = (jsonData) => {
    setData(jsonData);
  };

  return (
    <div>
      <JsonEditor
        value={data}
        onChange={handleJsonChange}
      />
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

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

这里使用了一个 useState 钩子函数来定义当前的 JSON 数据，并吧数据作为 value 属性传递给 JsonEditor 组件，同时，定义了 A 个 onChange 回调函数监听当前编辑器中 JSON 数据的变化，并将最新的 JSON 数据 pass 给 data 状态量。最后使用一个 pre 元素展示当前的 JSON 数据。

示例

下面来看看在项目中如何使用 jsoneditor 组件。

示例1：配置 JsonEditor 的主题颜色

  import React, { useRef, useEffect } from 'react';
  import JSONEditor from 'jsoneditor';
+ import 'jsoneditor/dist/jsoneditor.min.css';

  const JsonEditor = ({ value, onChange, theme }) => {
    const editorRef = useRef(null);

+   let editorTheme = 'ace/theme/chrome';
+   if (theme === 'dark') {
+     editorTheme = 'ace/theme/twilight';
+   }

    useEffect(() => {
      const editor = new JSONEditor(editorRef.current, {
        onChangeJSON: onChange,
        mode: 'tree',
        modes: ['tree', 'code'],
        ace: window.ace,
+       theme: editorTheme,
        onError: (error) => {
          console.log(error);
        },
      });

      editor.set(value);

      return () => {
        editor.destroy();
      };
    }, []);

    return <div ref={editorRef} />;
  };

  export default JsonEditor;

在 jsx 中

   <JsonEditor value={data} onChange={handleChange} theme="dark" />

JsonEditor 组件中加入了对 theme 属性的监听，通过改变 theme 属性，来展示不同的主题风格。我们在 editorTheme 中定义了两种不同的主题色，并且在 JsonEditor 组件中添加监听器监听 theme 属性，当 theme 属性值为 'dark' 时，应用 twilight 主题风格。在这个示例中，我们对 jsoneditor 组件进行了一次封装，并且添加了一个自定义属性 theme，来显示不同的主题风格。

示例2：序列化 JsonEditor 中的数据

在 JsonEditor 中的 json 数据返回后，有时用于序列化使用。在下面的示例中，我们展示一个实际的用例，在 这里 对 onChange 回调函数处理 json 数据的方法进行了修改，对 DOM 中的这个 textarea 中的数据流进行了串联。

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

  const JsonEditor = ({ value, onChange, theme }) => {
    const editorRef = useRef(null);
    const payloadRef = useRef(null);

    useEffect(() => {
      const editor = new JSONEditor(editorRef.current, {
        onChangeJSON: (jsonData) => {
          onChange(jsonData);
          const jsonStr = JSON.stringify(jsonData, null, 2);
          payloadRef.current.value = jsonStr;
        },
        mode: 'tree',
        modes: ['tree', 'code'],
        ace: window.ace,
        theme: 'ace/theme/chrome',
        onError: (error) => {
          console.log(error);
        },
      });

      editor.set(value);

      return () => {
        editor.destroy();
      };
    }, []);

    return (
      <div className="flexrow">
        <div ref={editorRef}></div>
        <textarea ref={payloadRef} className="flexcol" />
      </div>
    );
  };

  export default JsonEditor;

在这个版本的 JsonEditor 组件中，我们添加了一个新的 ref，指向了一个 textarea 元素。同时，我们在 onChangeJSON 回调函数中添加了新的代码，在回调函数完成之后，为 textarea 插入 json 数据的字符串版。

在这个示例中，使用 react 封装了 jsoneditor 组件，并以一种正常使用方式进行了展示。适用于大多数项目中，封装了的 JsonEditor 组件都会按照这个示例在项目中被调用。