牛逼！大厂都在用的一款表单解决方案

大家好，我是「前端实验室」爱分享的了不起~

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

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:https://github.com/alibaba/x-render