antd-schema-form基于Ant Design，可以通过JSON Schema配置快速生成可交互的表单。

这个Demo简单的展示了通过配置schema.json构建一个表单。

1. 在使用之前，你需要在babel配置antd的按需加载。
2. 如果你引入了es风格的代码，需要为babel-loader的exclude做如下配置：

{
  test: /^.*\.js$/,
  use: 'babel-loader',
  exclude: /node_modules[\\/](?!antd-schema-form)/
}

3. React的版本>=16.6.0。
4. 组件的使用：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Schemaform, { 
  getKeysFromObject,  // 获取schema.json下所有的key
  getObjectFromValue, // object对象，格式化成表单需要的值
  getValueFromObject. // 从form获取到的表单的值，格式化成object对象
} from 'antd-schema-form';
import 'antd-schema-form/style/antd-schema-form.css'; // 引入样式

// json schema
const json = {
  $id: '$root',
  type: 'object',
  title: '$root',
  properties: {}
};

ReactDOM.render(
  <SchemaForm json={ json } />,
  document.getElementById('app')
);

表单根据json schema配置，json schema属性参考http://json-schema.org/draft-07/json-schema-validation.html。

您可以通过表单生成和表单预览功能来代替一部分的手写json schema的工作。

由于json schema的属性并不能完全满足表单的生成，所以也添加了一些自定义的属性，自定义的属性名称约定以$开头。

• id: string：当前属性的id。一般约定以$root开头，以/作为分隔，例如$root/key1/key2，id和json的键名要对应。 当type为object时，需要加/properties，例如：

  {
    "id": "$root",
    "type": "object",
    "properties": {
      "key": {
        "id": "$root/properties/key",
        "type": "string"
      }
    }
  }

  当type为array时，items需要加/items，例如：

  {
    "id": "$root",
    "type": "array",
    "items": {
      "id": "$root/items",
      "type": "string"
    }
  }

• type: string：数据类型，包括string、number、integer、boolean、array、object。schema form根据该类型渲染不同的组件。

• title: string：标题，用于描述关键字的作用。表单的标题。

• description: string：说明，用于描述关键字的作用。表单的描述。

• oneOf: Array<object>：关键字可能的多个类型。

组件默认渲染折叠面板（Collapse）。配置属性：

• properties: object：当type为object时，列出对象下面的属性。
• required: Array<string>：对象必须包含的属性。不同于$required属性。

组件默认渲染输入框（Input）。配置属性：

• $required: boolean：当前的对象值必须存在。对应表单的required验证。

• $requiredMessage: string：自定义required的验证失败提示信息。

• pattern: string：正则表达式验证。

• $patternOption: string：用于指定全局匹配、区分大小写的匹配和多行匹配。

• $patternMessage: string：自定义pattern的验证失败提示信息。

• minLength: number：字符串的最小长度验证。

• $minLengthMessage: string：自定义minLength的验证失败提示信息。

• maxLength: number：字符串的最大长度验证。

• $maxLengthMessage: string：自定义maxLength的验证失败提示信息。

• $length: number：字符串的指定长度验证。

• $lengthMessage: string：自定义$length的验证失败提示信息。

• enum: Array<string>：验证表单控件的值必须在此关键字的数组值中。

• $enumMessage: string：自定义enum的验证失败信息。

• $readOnly: boolean：表单控件只读。

• $placeholder: string：表单控件的placeholder属性。

• $defaultValue: string：表单控件的默认值。

• $componentType: string：渲染为其他组件。

  值	组件名称
  textArea	文本域
  select	下拉框
  radio	单选框
  date	日期选择器
  upload	文件上传

• $options: Array<{ label: string, value: string }>：当$componentType为select、radio时，可选的选项。

组件默认渲染数字输入框（InputNumber）。配置属性：

• $required: boolean：当前的对象值必须存在。对应表单的required验证。

• $requiredMessage: string：自定义required的验证失败提示信息。

• minimum: number：表单的最小值。

• $minimumMessage: string：自定义minimum的验证失败提示信息。

• maximum: number：表单的最大值。

• $maximumMessage: string：自定义maximum的验证失败提示信息。

• $integer: boolean：必须是整数。当type为integer时，默认验证此项。

• $integerMessage: string：自定义$integer的验证失败提示信息。

• enum: Array<number>：验证表单控件的值必须在此关键字的数组值中。

• $enumMessage: string：自定义enum的验证失败信息。

• $readOnly: boolean：表单控件只读。

• $placeholder: string：表单控件的placeholder属性。

• $defaultValue: number：表单控件的默认值。

• $componentType: string：渲染为其他组件。

  值	组件名称
  radio	单选框

• $options: Array<{ label: string, value: number }>：当$componentType为radio时，可选的选项。

组件默认渲染多选框（Checkbox）。配置属性：

• $defaultValue: boolean：表单控件的默认值。

• $componentType: string：渲染为其他组件。

  值	组件名称
  switch	开关

组件默认渲染表格（Table）。配置属性：

• items: object：数组的内容。

• $defaultValue: Array<any>：表单控件的默认值。

• $componentType: string：渲染为其他组件。

  值	组件名称
  checkbox	多选框
  multiple	下拉框的多选模式

• $options: Array<{ label: string, value: string | number }>：当$componentType为checkbox、multiple时，可选的选项。

• 运行命令npm run dll、npm run dev，在浏览器中输入http://127.0.0.1:5050查看demo并开发。
• 运行命令npm run dll、npm run test，在浏览器中输入http://127.0.0.1:6060运行测试用例。