Formily 实践自定义组件、自定义表单设计器

知乎作者介绍：https://zhuanlan.zhihu.com/p/364750033

本文信息都来自上述官方文档和自己的实践总结，因为本人确切的说是一名后端，对于前端是对文档严重依赖的，当然逼急了也会去看源码，所以难免会出现前端专业缺失的问题，如有错误请指点。

简介

Formily是一个与框架无关的表单解决方案，使用了JSON Schema，多端适配,目前社区已经有React、Vue方案，更是支持了众多流行前端框架如ant、next、element、element-plus、antdv、vant、semi、tdesign-react等。按照作者的说法是：定位是 面向复杂场景的表单解决方案，面向企业级表单的专业解决方案，有如下特色：

业内领先的思想
丰富的使用场景
极致的细节优化
完善的文档周边

Formily前后有两版本，前后不兼容，但是我没赶上1.0，直接享受2.0，下面是我自己的使用实践。

实践总结

因为本人是后端，所以采用了Ant recat方案，下文全是如此。

快速开始

这里我按照自己的实践，使用ant pro 为项目工程模板。

<pre id="GXR1v" class="wp-block-preformatted hljs language-css" style="box-sizing: border-box; margin-top: 0px; overflow: auto; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.25px; margin-bottom: 1rem; display: block; color: rgb(171, 178, 191); padding: 0.5em; border-radius: 5px; white-space: pre-wrap; background: rgb(40, 44, 52); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">npm i @ant-design/pro-cli -g
pro create formilyant
cd formilyant
yarn</pre>

基础工作准备完毕，开始引用formily组件。当然是按照官方文档走了，https://formilyjs.org/zh-CN/guide/upgrade

<pre id="GkUUt" class="wp-block-preformatted hljs language-sql" style="box-sizing: border-box; margin-top: 0px; overflow: auto; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.25px; margin-bottom: 1rem; display: block; color: rgb(171, 178, 191); padding: 0.5em; border-radius: 5px; white-space: pre-wrap; background: rgb(40, 44, 52); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">yarn add @formily/core
yarn add @formily/react
yarn add @formily/antd </pre>

@formily/core是formily核心库，formily能力所在之处，因为不依赖具体框架所以就是上文所说的框架无关性从而有了那么多的社区实现，负责管理表单的状态，表单校验，联动等等。

@formily/reactUI桥接库，使用react的项目必须安装它

@formily/antd Formily组件库，注意，这个组件库是用来给formily使用的，这个库是按照formily要求所封装的UI组件库，即Formily不能直接消费UI组件库需要按照formily的格式所封装，也属于UI组件库的桥接库（这里我想过一个问题，为什么Formily不能直接消费框架组件库呢，因为另一个解决方案 XRender 就可以，看了formily的实现后就明白了）。当然了，formily封装UI组件库也是很简单的正如官网那样，

[图片上传失败...(image-bd4a5e-1665626053087)]

打开看还真是这么简单，以Input为例，

<pre id="zGDPG" class="wp-block-preformatted hljs language-typescript" style="box-sizing: border-box; margin-top: 0px; overflow: auto; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.25px; margin-bottom: 1rem; display: block; color: rgb(171, 178, 191); padding: 0.5em; border-radius: 5px; white-space: pre-wrap; background: rgb(40, 44, 52); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">import React from 'react'
import { connect, mapProps, mapReadPretty } from '@formily/react'
import { Input as AntdInput } from 'antd'
import { InputProps, TextAreaProps } from 'antd/lib/input'
import { PreviewText } from '../preview-text'
import { LoadingOutlined } from '@ant-design/icons'

type ComposedInput = React.FC<React.PropsWithChildren<InputProps>> & {
TextArea?: React.FC<React.PropsWithChildren<TextAreaProps>>
}

export const Input: ComposedInput = connect(
AntdInput,
mapProps((props, field) => {
return {
...props,
suffix: (
<span>
{field?.['loading'] || field?.['validating'] ? (
<LoadingOutlined />
) : (
props.suffix
)}
</span>
),
}
}),
mapReadPretty(PreviewText.Input)
)

Input.TextArea = connect(AntdInput.TextArea, mapReadPretty(PreviewText.Input))

export default Input</pre>

是不是很简单，稍后我再下文会写一个我自己封装的组件作详细说明。

官网实例上手实践

Formily 实践自定义组件、自定义表单设计器：https://www.xiaowanghu.com/archives/169

Formily 实践 自定义组件、自定义表单设计器

简介

实践总结

快速开始

Formily 实践自定义组件、自定义表单设计器