配置说明
import * as React from 'react'; export interface Item { type: React.Component; // 组件类型， 比如Input 等 name: string; // key items?: Array<any>; // dataSource description: string; // Cell description label?: string; // Cell title render?: () => React.ReactNode; //自定义 render getJSON?: () => object | null; // 动态返回Item配置 elProps?: object; // 组件的props配置 , 比如type为Input, elProps则会配置到Input cellProps?: object; // cell props配置 } export interface Props { layoutData: Array<Item>; // 表单布局配置 data: object; // 数据存储,name作为key,内容为value setData: () => void; // 数据更新 } interface FormRenderer extends React.FC<Props> {} declare const FormRenderer: FormRenderer; export default FormRenderer;上述代码效果如下
这种方式唯一缺点是无法像json一样持久化存储在数据库 ，优点是可以统一移动和pc端表单配置式开发，少了大量的样板代码和嵌套， 可以统一处理数据的存取和验证, 表单项的排列方式 。