首页
前端开发
Webpack
jsoneditor-react React组件封装与配置编辑器实现

jsoneditor-react React组件封装与配置编辑器实现

0 次浏览 0 条评论
zip
zip

React 项目里的 JSON 编辑需求，用jsoneditor-react就挺顺手的。它其实是对 jsoneditor 做的一个轻量封装，平时咱们前端碰上配置项编辑、后端返回数据要调试啥的，用这个组件刚刚好。

包的体积做得还挺克制的，默认走的是精简版，你只拿它做个配置面板或者小型编辑器，完全够用。而且支持 ES Module 构建，配合新版的 Webpack 构建速度也快。

安装也简单：npm install --save jsoneditor-react，不过注意它依赖 jsoneditor 本体，记得一起装上。

要让它正常跑，还得配一下 webpack 的 loader，比如 css-loader 和 file-loader，主要是给图标和样式让路：

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, loader: 'css-loader' },
      { test: /\.svg$/, loader: 'file-loader' }
    ]
  }
};

用法也挺直观的，直接引入 JsonEditor 组件，props 里塞个 JSON 对象，样式也能自己改：

import { JsonEditor } from 'jsoneditor-react';
import 'jsoneditor-react/es/editor.min.css';

哦对了，jsoneditor-react 3.x 开始只 ES 构建，要是你项目还在走 CommonJS，得手动搞点兼容。Webpack 配置不太熟的朋友，可以参考这几篇：

如果你平时经常搞表单或者后台管理界面，jsoneditor-react算是个不错的工具。轻便、好接、扩展性也还行，调试用起来舒服。

zip 文件大小：143.81KB