前言：
目前同学们对“html渲染引擎”可能比较关注，朋友们都想要学习一些“html渲染引擎”的相关文章。那么小编同时在网上收集了一些关于“html渲染引擎””的相关文章，希望姐妹们能喜欢，各位老铁们快快来了解一下吧！介绍
form-render是阿里开源的跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面，常用于自定义搭建配置界面生成。
支持 Ant Design 和 Fusion Design 主流的视觉主题使用 JSON Schema 标准协议描述表单配置，并搭配丰富类型且可扩展的组件支持 1 排 N、横纵排、支持对象无限嵌套、自定义正则校验、自定义样式组件、列表拖拽等特性已在淘宝、天猫、飞猪、亚博科技、安全智能、新零售行业工作台、人工智能实验室、安全智能部门等多 BU 多场景使用，简单使用同时支持复杂场景使用使用上有详细文档，维护上有专人支持Github
安装npm i form-render -S
import React 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";// import FormRender from "form-render/lib/fusion";// propsSchema 使用标准的 JSON Schema 来描述表单结构const propSchema = { type: "object", properties: { dateDemo: { title: "时间", type: "string" } }};// uiSchema 可以增强展示类型的丰富性，如时间组件const uiSchema = { dateDemo: { "ui:widget": "date" }};class App extends React.Component { constructor() { super(); this.state = { formData: {} }; } // 数据变化回调 onChange = value => { this.setState({ formData: value }); }; // 数据格式校验回调 onValidate = list => { console.log(list); }; render() { const { formData } = this.state; return ( <FormRender propsSchema={propSchema} uiSchema={uiSchema} formData={formData} onChange={this.onChange} onValidate={this.onValidate} /> ); }}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);文档API常用API不常用APIform-render原理FormRender 底层引擎用原生 JS 来实现，通过解析 JSON Schema 配置，并支持渲染原生的 HTML 表单，通过 UiSchema 来配置 Widget 组件，在此基础上处理好上层 Ant Design 或 Fusion 组件 Widget 和 Input Format 的对应关系，最后还可以做到无缝接入其他组件体系的好处
使用场景
1. 规范化表单视图的快速生成：写好对应的参数配置，快速生成一个标准表单，省去了使用类 Ant Design 表单的麻烦地方
2.可视化配置界面生成：并可以从代码层面自动生成 JSON Schema，来完成整体流程的打通
3.服务能力配置界面生成：常用于后台字段系统中，接口同学通过吐 JSON Schema 字段给前端界面，渲染出他所想要的界面以及获取用户的输入进行提交给后端，可以起到无需发布就可无缝扩展各种类型的作用
4.作为配置输入和搭建系统配合使用：FormRender 在正常展示的情况下，可以很简单的进行和原主题的适配使用
总结
介绍这样一个表单渲染引擎，是因为目前有很多地方需要用到自定义表单，如果配合上拖拽界面，即可实现一个自定义的智能表单，底层的渲染交给form-render即可，如果你想用它来做一些有意思的东西，不妨尝试一番！
标签： #html渲染引擎
