schema的缺点

    • 不支持函数，因为函数无法存储，例如函数里面有很多引用
    • 不支持jsx，因为 jsx序列化后，无法存储，例如引入了其他的库
    • 解决：高级功能：创建了自己的 DSL（领域特定语言）或抽象层

    根据传入的 JSONSchema渲染表单

    1. import React, { useMemo, useEffect } from 'react'
    2. import { createForm } from '@formily/core'
    3. import { createSchemaField } from '@formily/react'
    4. import {
    5.   Form,
    6.   FormItem,
    7.   DatePicker,
    8.   Checkbox,
    9.   Cascader,
    10.   Editable,
    11.   Input,
    12.   NumberPicker,
    13.   Switch,
    14.   Password,
    15.   PreviewText,
    16.   Radio,
    17.   Reset,
    18.   Select,
    19.   Space,
    20.   Submit,
    21.   TimePicker,
    22.   Transfer,
    23.   TreeSelect,
    24.   Upload,
    25.   FormGrid,
    26.   FormLayout,
    27.   FormTab,
    28.   FormCollapse,
    29.   ArrayTable,
    30.   ArrayCards,
    31. } from '@formily/antd'
    32. import { Card, Slider, Rate, Tag } from 'antd'
    34. const Text: React.FC<{
    35.   value?: string
    36.   content?: string
    37.   mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
    38. }> = ({ value, mode, content, ...props }) => {
    39.   const tagName = mode === 'normal' || !mode ? 'div' : mode
    40.   return React.createElement(tagName, props, value || content)
    41. }
    43. const Tag1: React.FC<{
    44.   value?: string
    45.   mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
    46. }> = ({ value, mode, ...props }) => {
    47.   return React.createElement(Tag, props, value)
    48. }
    50. const SchemaField = createSchemaField({
    51.   components: {
    52.     Space,
    53.     FormGrid,
    54.     FormLayout,
    55.     FormTab,
    56.     FormCollapse,
    57.     ArrayTable,
    58.     ArrayCards,
    59.     FormItem,
    60.     DatePicker,
    61.     Checkbox,
    62.     Cascader,
    63.     Editable,
    64.     Input,
    65.     Text,
    66.     NumberPicker,
    67.     Switch,
    68.     Password,
    69.     PreviewText,
    70.     Radio,
    71.     Reset,
    72.     Select,
    73.     Submit,
    74.     TimePicker,
    75.     Transfer,
    76.     TreeSelect,
    77.     Upload,
    78.     Card,
    79.     Slider,
    80.     Rate,
    81.     Tag1,
    82.   },
    83. })
    85. export interface IRenderJsonSchemaProps {
    86.   form: {}
    87.   schema: {}
    88. }
    90. const dataSource = [
    91.   {
    92.     id: 1,
    93.     user: ['章鱼', '22章鱼'],
    94.     age: 23,
    95.     phone: '18915980989',
    96.     like: 'online',
    97.     address: '北京市晋升区朝阳大路',
    98.   },
    99.   {
    100.     id: 2,
    101.     user: '讲台',
    102.     age: 18,
    103.     phone: '18885980989',
    104.     like: 'offline',
    105.     address: '南京市谷口区朝阳大路',
    106.   }
    107. ]
    109. export const RenderJsonSchema: React.FC<IRenderJsonSchemaProps> = (props) => {
    110.   const form = useMemo(() => createForm(), [])
    111.   const { form: formProps, schema } = props;
    113.   useEffect(() => {
    114.     form.setInitialValues({
    115.       "ovnavgu2hv1": dataSource,
    116.     });
    117.   }, [dataSource]);
    119.   return (
    120.     <Form
    121.       {...formProps}
    122.       form={form}
    123.       onAutoSubmit={console.log}
    124.     >
    125.       <SchemaField schema={schema} />
    126.     </Form>
    127.   )
    128. }