README-zhCN.md

antd-schema-form

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

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

开始使用

1. 在使用之前，你需要在babel配置antd的按需加载。
2. 需要为babel-loader做如下配置:

{
  test: /node_modules[\\/]antd-schema-form[\\/].*\.jsx?$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        plugins: [
          [
            'import',
            {
              libraryName: 'antd',
              libraryDirectory: 'es',
              style: 'css'
            }
          ]
        ]
      }
    }
  ]
}

3. React的版本>=16.7.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')
);

API

参数	说明	类型
json	json schema，必需	object
value	表单的值	object
onOk	表单的确认事件	(form: object, value: object, keys: Array<string>) => void
onCancel	表单的取消事件	(form: object, keys: Array<string>) => void
okText	确认按钮文字	string
cancelText	取消按钮文字	string
footer	自定义底部内容，onOk事件参考	(form: object) => React.Node
customComponent	自定义渲染组件，参考	object
customTableRender	自定义表格列渲染组件，参考	object
languagePack	语言配置，参考	object
formOptions	Form的参数，参考	object

json schema配置

自定义渲染组件

按需加载组件

开发和测试

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