告别繁琐表单开发：Ant Design Pro JSON Schema动态生成方案

2026-02-04 04:12:49作者：廉皓灿Ida

你是否还在为重复编写表单组件而烦恼？是否希望通过配置文件快速生成复杂表单？本文将带你探索如何利用JSON Schema在Ant Design Pro中实现动态表单生成，让你从此告别繁琐的表单开发工作。

动态表单的应用场景与优势

在现代Web应用开发中，表单是用户与系统交互的重要桥梁。传统的表单开发方式需要手动编写大量重复代码，不仅效率低下，还难以维护。特别是当表单结构需要频繁变更时，开发人员不得不修改多处代码，增加了出错风险。

动态表单生成技术通过将表单结构抽象为配置文件（如JSON Schema），可以实现表单的灵活配置和快速迭代。这种方式的优势主要体现在：

开发效率提升：无需编写重复的表单组件代码，通过配置文件即可生成表单
维护成本降低：表单结构变更只需修改配置文件，无需改动源代码
灵活性增强：支持动态调整表单字段、验证规则和布局
一致性保证：统一的表单生成逻辑确保界面风格和交互体验的一致性

Ant Design Pro提供了强大的表单组件库，结合JSON Schema可以构建出灵活且功能完善的动态表单系统。项目中的src/pages/table-list/components/CreateForm.tsx和src/pages/table-list/components/UpdateForm.tsx文件展示了动态表单的实际应用。

JSON Schema基础概念

JSON Schema（JSON模式）是一种用于描述JSON数据结构的规范。它可以定义数据类型、格式、约束条件等，为JSON数据提供了一种标准化的描述方式。在表单生成中，JSON Schema可以描述表单字段的类型、验证规则、默认值等信息。

一个基本的JSON Schema示例：

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "title": "规则名称",
      "required": true
    },
    "desc": {
      "type": "string",
      "title": "规则描述",
      "minLength": 5
    }
  }
}

这个Schema定义了一个包含"name"和"desc"两个字段的对象，分别对应字符串类型，并指定了标题和验证规则。

Ant Design Pro表单组件与JSON Schema的结合

Ant Design Pro提供了ProForm系列组件，这些组件支持通过配置生成表单。虽然项目中现有的表单实现（如CreateForm和UpdateForm）主要使用声明式方式定义表单字段，但我们可以基于这些组件构建JSON Schema驱动的动态表单系统。

ProForm组件的配置化特性

ProForm组件支持通过name、label、rules等属性配置表单字段，这为JSON Schema的转换提供了基础。例如，src/pages/table-list/components/CreateForm.tsx中的ProFormText组件：

<ProFormText
  rules={[
    {
      required: true,
      message: (
        <FormattedMessage
          id="pages.searchTable.ruleName"
          defaultMessage="Rule name is required"
        />
      ),
    },
  ]}
  width="md"
  name="name"
/>

这段代码定义了一个文本输入框，包含验证规则和宽度设置。这些配置信息可以很容易地从JSON Schema转换而来。

构建JSON Schema到ProForm的转换函数

为了实现基于JSON Schema的动态表单生成，我们需要创建一个转换函数，将JSON Schema转换为ProForm组件的配置。以下是一个简单的实现示例：

import { ProFormText, ProFormTextArea, ProFormSelect } from '@ant-design/pro-components';

// 根据JSON Schema生成ProForm组件
const renderFormItem = (schema) => {
  const { type, title, required, minLength, enum: enums } = schema;
  
  const rules = [];
  if (required) {
    rules.push({ 
      required: true, 
      message: `${title} is required` 
    });
  }
  
  if (minLength) {
    rules.push({ 
      min: minLength, 
      message: `${title} must be at least ${minLength} characters` 
    });
  }
  
  switch (type) {
    case 'string':
      if (schema.format === 'textarea') {
        return (
          <ProFormTextArea 
            name={schema.name} 
            label={title} 
            rules={rules} 
            width="md" 
          />
        );
      }
      if (enums) {
        return (
          <ProFormSelect 
            name={schema.name} 
            label={title} 
            rules={rules}
            valueEnum={enums.reduce((obj, item) => {
              obj[item.value] = item.label;
              return obj;
            }, {})} 
            width="md" 
          />
        );
      }
      return (
        <ProFormText 
          name={schema.name} 
          label={title} 
          rules={rules} 
          width="md" 
        />
      );
    // 可以扩展其他类型...
    default:
      return null;
  }
};

这个函数根据JSON Schema的类型和属性，动态生成对应的ProForm组件。

多步骤表单的动态生成

在实际应用中，我们经常需要处理复杂的多步骤表单。Ant Design Pro的StepsForm组件可以实现这一需求，结合JSON Schema可以构建出灵活的多步骤动态表单。

项目中的src/pages/table-list/components/UpdateForm.tsx展示了多步骤表单的实现方式：

<StepsForm
  stepsProps={{
    size: 'small',
  }}
  stepsFormRender={(dom, submitter) => {
    return (
      <Modal
        width={640}
        title="规则配置"
        open={open}
        footer={submitter}
        onCancel={onCancel}
      >
        {dom}
      </Modal>
    );
  }}
  onFinish={onFinish}
>
  <StepsForm.StepForm title="基本信息">
    {/* 表单字段 */}
  </StepsForm.StepForm>
  <StepsForm.StepForm title="配置规则属性">
    {/* 表单字段 */}
  </StepsForm.StepForm>
  <StepsForm.StepForm title="设定调度周期">
    {/* 表单字段 */}
  </StepsForm.StepForm>
</StepsForm>

我们可以扩展动态表单生成功能，支持基于JSON Schema数组生成多步骤表单：

const MultiStepDynamicForm = ({ schemaSteps }) => {
  return (
    <StepsForm onFinish={handleFinish}>
      {schemaSteps.map((step, index) => (
        <StepsForm.StepForm key={index} title={step.title}>
          {Object.entries(step.schema.properties).map(([field, schema]) => (
            <React.Fragment key={field}>
              {renderFormItem({ ...schema, name: field })}
            </React.Fragment>
          ))}
        </StepsForm.StepForm>
      ))}
    </StepsForm>
  );
};

使用时，只需传入包含多个步骤的JSON Schema配置：

const schemaSteps = [
  {
    title: "基本信息",
    schema: {
      type: "object",
      properties: {
        name: { type: "string", title: "规则名称", required: true }
      }
    }
  },
  {
    title: "规则属性",
    schema: {
      type: "object",
      properties: {
        type: { 
          type: "string", 
          title: "规则类型",
          enum: [
            { value: "0", label: "强" },
            { value: "1", label: "弱" }
          ]
        }
      }
    }
  }
];

<MultiStepDynamicForm schemaSteps={schemaSteps} />

动态表单生成完整示例

结合以上内容，我们可以构建一个完整的基于JSON Schema的动态表单生成组件。以下是一个集成示例：

import { StepsForm, ProFormText, ProFormTextArea, ProFormSelect } from '@ant-design/pro-components';
import { ModalForm } from '@ant-design/pro-components';
import { Button } from 'antd';

// 根据JSON Schema生成ProForm组件
const renderFormItem = (field, schema) => {
  const { type, title, required, minLength, enum: enums } = schema;
  
  const rules = [];
  if (required) {
    rules.push({ required: true, message: `${title} is required` });
  }
  
  if (minLength) {
    rules.push({ min: minLength, message: `${title} must be at least ${minLength} characters` });
  }
  
  switch (type) {
    case 'string':
      if (schema.format === 'textarea') {
        return (
          <ProFormTextArea 
            name={field} 
            label={title} 
            rules={rules} 
            width="md" 
          />
        );
      }
      if (enums) {
        return (
          <ProFormSelect 
            name={field} 
            label={title} 
            rules={rules}
            valueEnum={enums.reduce((obj, item) => {
              obj[item.value] = item.label;
              return obj;
            }, {})} 
            width="md" 
          />
        );
      }
      return (
        <ProFormText 
          name={field} 
          label={title} 
          rules={rules} 
          width="md" 
        />
      );
    default:
      return null;
  }
};

// 多步骤动态表单组件
const DynamicFormGenerator = ({ schemaSteps, onFinish }) => {
  return (
    <StepsForm onFinish={onFinish}>
      {schemaSteps.map((step, index) => (
        <StepsForm.StepForm key={index} title={step.title}>
          {Object.entries(step.schema.properties).map(([field, schema]) => (
            <React.Fragment key={field}>
              {renderFormItem(field, schema)}
            </React.Fragment>
          ))}
        </StepsForm.StepForm>
      ))}
    </StepsForm>
  );
};

// 使用示例
const App = () => {
  const formSchemaSteps = [
    {
      title: "基本信息",
      schema: {
        type: "object",
        properties: {
          name: { 
            type: "string", 
            title: "规则名称", 
            required: true 
          },
          desc: { 
            type: "string", 
            title: "规则描述", 
            minLength: 5,
            format: "textarea"
          }
        }
      }
    },
    {
      title: "规则属性",
      schema: {
        type: "object",
        properties: {
          target: { 
            type: "string", 
            title: "监控对象",
            enum: [
              { value: "0", label: "表一" },
              { value: "1", label: "表二" }
            ]
          },
          type: { 
            type: "string", 
            title: "规则类型",
            enum: [
              { value: "0", label: "强" },
              { value: "1", label: "弱" }
            ]
          }
        }
      }
    }
  ];
  
  const handleFormFinish = (values) => {
    console.log("Form values:", values);
    // 处理表单提交逻辑
  };
  
  return (
    <ModalForm
      title="动态表单示例"
      trigger={<Button type="primary">打开动态表单</Button>}
      onFinish={handleFormFinish}
    >
      <DynamicFormGenerator schemaSteps={formSchemaSteps} onFinish={handleFormFinish} />
    </ModalForm>
  );
};

export default App;