前端开发中表单渲染是最为常见的工作，选择一款好的表单渲染插件就能大大地提升开发效率，今天就给大家介绍一款由飞猪团队退出的表单渲染器——FormRender

FormRender 是由飞猪推出的一款开源表单工具，通过 JsonSchema 协议渲染表单，为中后台表单业务提供开箱即用的通用解决方案。

特点

• 内置组件丰富：内置组件非常丰富，包括基础组件、嵌套卡片类组件和动态增减 List 组件等，可以满足大多数场景的表单实现需求。
• 扩展性强：具有非常强的扩展性，支持自定义各种类型的表单控件，用户可以根据实际需要进行定制，非常灵活。
• 易于使用：容易上手，可以通过表单设计器可视化拖拽的方式快速生成表单。
• 协议简单：在一定程度上遵循了 JsonSchema 规范，因此相对容易上手和理解。
• 较强的配置能力：具有较强的配置能力，可以对表单联动、校验、布局以及数据处理等方面进行配置。
• 良好的性能体验：通过对 FormRender 进行重构，底层采用 Antd Form 来实现表单的数据收集和管控，同时针对控件渲染层面进行优化处理，从而大幅提升性能，使得在使用过程中具有良好的性能体验。

  使用

  安装

  npm install form-render --save

  引入使用，以创建一个表单为例

  

  import React from 'react';
import FormRender, { useForm } from 'form-render';

  const schema = {
  type: 'object',
  properties: {
  input: {
  title: '输入框',
  type: 'string'
  },
  select: {
  title: '下拉框',
  type: 'string',
  props: {
  options: [
  { label: '早', value: 'a' },
  { label: '中', value: 'b' },
  { label: '晚', value: 'c' }
  ]
  }
  }
  }
  };

  export default () => {
  const form = useForm();

  const onFinish = (formData) => {
  console.log('formData:', formData);
  };

  return (
  <FormRender
  form={form}
  schema={schema}
  onFinish={onFinish}
  footer={true}
  />
  );
  }

  表单设计器

  对于一些自定义的表单样式，可以使用表单设计器进行自定义设计，拖拽导出 schema，丢到代码里生成可用表单。

  

  

  FormRender 还内置了许多高级功能：表单布局、表单联动、表单校验、常用交互、数据转换、自定义组件 等

  其中内置的方法和功能大幅提高中后台系统中的表单开的灵活性，让开发者省略从头编写表单组件的繁琐步骤，极大地提升了开发效率。

  最后奉上github链接地址：

  github:https://github.com/alibaba/x-render