FormRender 一站式中后台表单解决方案 官网 https://xrender.fun/form-render FormRender 是中后台开箱即用的表单解决方案,通过 JsonSchema 协议动态渲染表单。为了能切实承接日益复杂的表单场景需求,2.0 我们进行了底层重构。我们的目标是以强大的扩展能力对表单场景 100% 的覆盖支持,同时保持开发者能快速上手,并以...
极简的组件 api:FormRender 使用上类似一个单独的可控的 input: // 可控的input <input value={value} onChange={onChange} /> // form-render, 只多了schema,用于描述 Form 长什么样 <FormRender formData={value} onChange={onChange} schema={schema} /> 这样的设计下,FR 只负责管理和改动表单数据/时时...
vscode 插件:快速准确书写 schema 一直是使用者的痛点,为此我们准备了 schema 书写利器:form-render snippets(vscode 插件),在 vscode 商店输入 ‘formrender’ 支持TypeScript:详见如何在 TypeScript 项目中使用 支持Ant Design 自定义主题不被覆盖 安装webpack 插件 ...
form-render的实现原理可以分为三个主要步骤:解析JSON Schema、渲染表单组件、收集表单数据。下面将详细介绍这三个步骤。 form-render需要解析JSON Schema。JSON Schema是一种描述数据结构的规范,它定义了数据的类型、格式、校验规则等信息。form-render通过解析JSON Schema,可以获取到表单的结构信息,包括表单中各个字段的...
alibaba/form-render FormRender 是一个通过 JSON Schema 生成标准 Form 的渲染引擎,常用于自定义搭建配置界面生成 0 比如你有想通过一定标准约束自动生成表单配置界面,类似于搭建配置表单界面这种场景,就可以考虑 FormRender,比如这些 在内部实践一年后,也有十多个BU在使用,为了让外部也可以用上,我们于今年10月份对它...
npm i form-render --save 最简demo 复制 import Reactfrom'react';import{Button}from'antd';import FormRender,{useForm}from'form-render';const schema={type:'object',properties:{input1:{title:'简单输入框',type:'string',required:true,},select1:{title:'单选',type:'string',enum:['a','b'...
npm i form-render # or yarn add form-render 快速使用 import React, { useState } from 'react'; import ReactDOM from 'react-dom'; // 使用 Ant Design 体系 import FormRender from 'form-render/lib/antd'; // 使用 Fusion Design 体系 // import "@alifd/next/dist/next.min.css"; // impo...
form-render的简单使用心得（FormRender现已升级到XRende）form-render的简单使⽤⼼得（FormRender现已升级到XRende）偶尔⼀次使⽤了，使⽤⽅便简单，通过简单的Schema就可以⽣成表单，很符合数据驱动这⼀理念，基本需求也都能满⾜。但是作为新兴的react第三⽅包，缺点就是互联⽹上相关资料太少，在...
FormRender的底层引擎基于纯原生JS实现，能解析JSON Schema配置并渲染原生HTML表单。通过UiSchema配置Widget组件，它处理了Antd或Fusion组件Widget与Input Format之间的对应关系，同时确保了与其它组件体系的无缝集成。想要亲身体验FormRender的强大功能？只需访问codeSandbox即可直接编辑，感受其带来的便捷与高效。
从中我们可以了解到:form-render是基于React框架做的一套表单生成引擎。和自家开源的antd-design组件库比较贴近,在src/widgets目录下存放的就是这两套组件主题库。当然,在Readme.md中也明确指出了这一点: 支持Ant Design 和 Fusion Design 主流的视觉主题 ...