jsoneditor简单使用

最近用jsoneditor做一个json数据的可视化顺便记录一下。

jsoneditor

JSON Editor 是一个基于 Web 的工具，用于查看、编辑、格式化和验证 JSON。它具有树形编辑器、代码编辑器和纯文本编辑器等多种模式。
总的体验下来是：使用简单，功能较多，可扩展的一个json可视化工具。
具体可以去看看，github链接: https://github.com/josdejong/jsoneditor

使用

yarn add jsoneditor

import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';


const [editor, setEditor] = useState();

useEffect(() => {
  const [editor, setEditor] = useState();
  /*
   第二个参数可以添加各种配置
   比如mode： text | tree | view 
   文本模式 树模式 预览模式
  */
  setEditor(new JSONEditor(containerRef.current, {mode: 'text'}));
  return () => {
  	// 记得一定要注销
    if (editor) {
      editor.destroy();
      setEditor(null);
    }
  };
}, []);

// 可以通过set 来添加json
const handleSet = () => {
  editor.set({ test: '测试' })
}

<div ref={containerRef}></div>