react--实现简易json编辑器

分析

     由于个人不太喜欢一切皆props的形式，故想要做到一些公共api既可以在内部调用又可以对外部暴漏，类组件使用高阶/装饰器,函数组件使用hooks，我这里使用方式二，对外提供useEditor

     json预览

            通过原生标签的contentEditable属性可以实现在线json编辑    

            通过pre标签并利用JSONstringify的参数3实现格式化预览  

            通过监听input事件实现编辑监听  

     树形编辑

            借用antd的tree组件快速实现树形ui展示

            将json字符串处理成treeData展示到tree组件， *** 作后在转成json反显到左侧预览区

            删除编辑能力通过将treeData这颗多叉树转为二叉树 *** 作后再回退到多叉树进行回显

创建react项目

    create-react-app json-edit --template typescript

实现

     index作为入口文件，应当承载着所有内部接口对外暴漏的能力

        这里将json和editor组件以及useEditor暴漏出去

     json组件用于展示并编辑json字符串

        使用contentEditable开启编辑，利用pre+JSONstringify({}, null, ' ')进行格式化，通过input事件监听json修改

     tree组件用于展示，并允许d窗的形式删除或修改节点

        首先是json字符串转为多叉树后展示

    当存在节点编辑后，需要从节点删除或编辑，可以先将多叉树转成二叉树进行 *** 作，后再转回多叉树， 之前实现过，就不重复写了

    最后就是将编辑后的多叉树再转回json字符串

效果如下

待优化的点

     预览时无法实时进行格式化处理，这是因为格式化 *** 作光标位置会重置，需要不断进行记录并在格式化后重新设置

     编辑 *** 作目前仅支持编辑最后一级节点

     删除 *** 作会导致原json数据的顺序被修改，这主要是在生成的id值不正确，导致在二叉转多叉时排序不准

以上就是关于react--实现简易json编辑器全部的内容，包括:react--实现简易json编辑器、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！