syncfusion-react-form-renderer

Name: syncfusion-react-form-renderer
Author: syncfusion

github.com/syncfusion其他339 次安装1 周前更新

代码仓库

关于 syncfusion-react-form-renderer

用于生成、排查和扩展 Syncfusion Form Renderer 的 React 表单技能，以 JSON schema 声明字段、布局、验证、动态行为和提交操作。文档涵盖条件逻辑、表达式、依赖下拉框、远程数据及自定义模板。

主要功能

01JSON schema 驱动表单
02字段验证与条件逻辑
03表达式及跨字段范围约束
04依赖下拉框与远程数据
05提交操作及自定义模板

适用场景

01从 schema 构建 React 表单
02配置联动字段和级联选项
03扩展控件模板与表单操作

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-form-renderer

安装后在 Claude Code 中输入/syncfusion-react-form-renderer确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

conditions.md

data-grid-features.md

dependent-dropdown.md

expressions.md

form-actions.md

form-schema.md

getting-started.md

min-max-range.md

remote-data-binding-in-components.md

templates.md

validations.md

详细介绍

Syncfusion React 表单渲染器

当用户需要使用 Syncfusion Form Renderer 组件生成、排查问题或扩展架构驱动的 React 表单时，请使用此技能。Form Renderer 基于单个 JSON 架构构建，用于声明字段定义、布局、验证、动态行为和提交操作。

何时使用此技能

当用户需要以下操作时，请使用此技能：

创建新的 React 应用并安装 Syncfusion Form Renderer 包
使用 properties、layout 和 settings 定义表单
添加 required、pattern、minLength、maxLength 或自定义验证规则
根据之前的回答显示或隐藏字段
构建依赖下拉列表或级联选项列表
使用 minMaxRange 根据另一个字段限制数值／日期
使用 expressionValue 和外部引用计算值
处理提交、重置和自定义按钮操作
使用 allowMultiple 和 buttonsGroups 定义分组按钮操作
使用自定义 React 模板替换内置组件

快速开始

安装 React 包：

npm install @syncfusion/ej2-react-form-renderer

导入 React 组件和架构类型：

import { FormRendererComponent, type Schema } from '@syncfusion/ej2-react-form-renderer';

定义架构，并使用 React 组件渲染：

import { FormRendererComponent, type Schema } from '@syncfusion/ej2-react-form-renderer';

export default function App() {
  const schema: Schema = {
    version: '0.1.0',
    properties: {
      emailAddress: {
        id: 'textbox_1',
        name: 'emailAddress',
        type: 'string',
        label: 'Email Address',
        textboxType: 'email',
        required: true,
        widget: 'textbox'
      },
      submit: {
        id: 'submit_1',
        name: 'defaultSubmit',
        type: 'button',
        label: 'Submit',
        buttonType: 'submit',
        widget: 'button'
      }
    },
    layout: [
      { type: 'field', propertyId: 'emailAddress' },
      { type: 'field', propertyId: 'submit' }
    ],
    settings: { name: 'Registration Form' }
  };

  const onSubmit = (args: any) => {
    console.log(args.data, args.isValid);
  };

  return <FormRendererComponent schema={schema} submit={onSubmit} />;
}