介绍
JSON表单是一个基于React的抽象组件，它能将JSON格式的配置渲染为一个Form表单，在实际项目中，通过它可以快速的搭建出一个表单页，这在B端项目中，有着很广泛的用途。
JSON表单的优点有以下几点：
- 可以快速的构建出一个表单
- 将表单的数据、逻辑、视图分离，结构简单，进一步抽象和维护也就比较容易
- 提供校验、自动缓存等额外功能，提升录入体验
- 可以跨项目共用复杂的表单组件
在一个前端团队中，组件共用显然是一件很有必要的事，但是对于表单组件来说，由于灵活度很高，如果没有约定俗成的一套规则，抽象出来的表单组件其实用价值不是很高，那么，JSON表单提供的也就是一套规则，能够使用JSON的数据格式去渲染抽象出来的表单组件。
原始表单
在这里，我暂且将不是通过JSON表单渲染出来的表单称为原始表单，以此来作为JSON表单的对比，在我开发过的大量的表单页里，我经常为以下的缺点所苦恼：
- 代码量庞大，开发效率低
- 数据、逻辑、视图杂糅，不便功能拆分和抽象
- 维护成本高
- 需要额外处理校验和缓存等功能
- 不同项目中很难共用表单组件
表单页的代码量是很庞大的，这是由于表单组件的重复编写和处理表单校验等非主线功能，导致开发表单页的效率很低下，并且由于表单页的数据、逻辑、视图杂糅在一起，后期需要拆分、抽象子功能模块或者维护表单页时，这将是一件很头疼的事，
在B端项目中，表单是一个很常用的功能，对于复杂且多个项目中都用到的表单组件，往往都想将该表单组件抽象出来，但是原始表单组件的抽象成本很高，需要考虑在不同项目中的灵活度的问题，且没有一套约定的规则，导致该组件的适用范围很小。
如何使用
JSON表单的github地址为：。
依赖环境
- React，基于React的抽象组件
- async-validator，基于它做表单校验
安装
npm i json_transform_form --save
一个栗子
import Form from 'json_transform_form'const config = { formKey: 'example-form', data: { name: '', descr: '', typeName: '' }, config: [ { type: 'input', dataKey: 'name', label: 'param', style: { wrap: { display: 'inline-block', width: 270, } }, }, { type: 'select', dataKey: 'typeName', options: ['string', 'integer', 'float'], style: { wrap: { display: 'inline-block', width: 100, margin: '0 15px' } }, }, { type: 'textarea', dataKey: 'descr', placeholder: '请输入param含义', label: 'param含义', style: { wrap: { width: 385, } } }, ]} this.FormWrap = ref} config={config}> 上面的代码描述了三个常用表单组件组成的简单表单，其效果如下图所示：
JSON表单的详细配置请看下节的。