{children}
}
export default ()=>{
return (
)
}
```
#### 如何实现递归渲染组件？
什么叫递归渲染组件？其实就是**实现了 JSON Schema 中 properties 和 items 的组件**，像`type:"string"` 这种节点就属于原子节点，不属于递归渲染组件。其实像前面说的布局组件，其实它也是属于递归渲染组件，只是它固定了渲染模式，所以可以很简单的注册。所以，我们大部分想要实现递归渲染的场景，可能更多的是在`type:"array"`这种场景才会去实现递归渲染，下面我们会详细介绍自增列表组件的实现方式。
#### 如何实现自增列表组件？
自增列表它主要有几个特点：
- 有独立样式
- 支持递归渲染子组件
- 支持数组项的新增，删除，上移，下移
- 不能使用 connect 函数包装，因为必须调用 Field API
为了帮助大家更好的理解如何实现自增列表组件，我们就不实现具体样式了，更多的是教大家如何实现递归渲染和，数组项的操作。下面我们看伪代码：
```tsx
import React, { Fragment } from 'react'
import {
registerFormField,
SchemaField,
FormPath
} from '@formily/react-schema-renderer'
//不用connect包装
registerFormField('array', ({ value, path, mutators }) => {
const emptyUI = (
)
const listUI = value.map((item, index) => {
return (
)
})
return value.length == 0 ? emptyUI : listUI
})
```
看到了没，要实现一个带递归渲染的自增列表组件，超级简单，反而如果要实现相关的样式就会有点麻烦，总之核心就是使用了 SchemaField 这个组件和 mutators API，具体 API 会在后面详细介绍。
#### 如何实现超复杂自定义组件？
这个问题，在老版 Formily 中基本无解，恰好也是因为我们这边的业务复杂度高到一定程度之后，我们自己被这个问题给受限制了，所以必须得想办法解决这个问题，下面我们可以定义一下，什么才是超复杂自定义组件：
- 组件内部存在大量表单组件，同时内部也存在大量联动关系
- 组件内部存在私有的服务端动态渲染方案
- 组件内部有复杂布局结构
就这 3 点，基本上满足超复杂自定义组件的特征了，对于这种场景，为什么我们通过正常的封装自定义组件的形式不能解决问题呢？其实主要是受限于校验，没法整体校验，所以，我们需要一个能聚合大量字段处理逻辑的能力，下面我们来看看具体方案：
```tsx
import React, { Fragment } from 'react'
import {
registerFormField,
SchemaField,
FormPath,
InternalField,
useFormEffects,
FormEffectHooks
} from '@formily/react-schema-renderer'
import { Input, Form } from 'antd'
const FormItem = ({ component, ...props }) => {
return (
{({ state, mutators }) => {
const messages = [].concat(state.errors || [], state.warnings || [])
let status = ''
if (state.loading) {
status = 'validating'
}
if (state.invalid) {
status = 'error'
}
if (state.warnings && state.warnings.length) {
status = 'warning'
}
return (
{React.createElement(component, {
...state.props,
value: state.value,
onChange: mutators.change,
onBlur: mutators.blur,
onFocus: mutators.focus
})}
)
}}
)
}
//不用connect包装
registerFormField('complex', ({ path }) => {
useFormEffects(({ setFieldState }) => {
FormEffectHooks.onFieldValueChange$('ccc').subscribe(({ value }) => {
if (value === '123') {
setFieldState('ddd', state => {
state.value = 'this is linkage relationship'
})
}
})
})
return (
<>
)
})
```
在这段伪代码中，我们主要使用了两个核心 API，主要是 useFormEffects 和 InternalField，useFormEffects 给开发者提供了局部写 effects 逻辑的地方这样就能很方便的复用 effects 逻辑，InternalField 则就是@formily/react 的 Field 组件，这个可以具体看看@formily/react 的文档，因为 SchemaForm 内部也是使用的@formily/react，所以可以共享同一个 Context，所以我们就能很方便的在自定义组件内使用 InternalField，同时需要注意一点，**直接使用 InternalField 的时候，我们注册的 name 是根级别的 name，如果想要复用当前自定义组件的路径，可以借助 FormPath 解析路径，然后再 concat 即可。**
### API
---
> 整体 API 完全继承@formily/core 与@formily/react，下面只列举@formily/react-schema-renderer 的特有 API
#### connect
> 自定义组件注册桥接器，这是一个高阶组件函数(HOC)，主要用于快速接入大多数组件库组件(实现了 value/onChange API 的组件)
**签名**
```typescript
connect(options?: IConnectOptions): (
component : React.JSXElementConstructor
)=>(
fieldProps:ISchemaFieldComponentProps
)=>JSX.Element
```
**用法**
```typescript
import { registerFormField, connect } from '@formily/react-schema-renderer'
import { Select } from 'antd'
registerFormField('select', connect()(Select))
```
#### registerFormField
> 注册自定义组件函数
**签名**
```typescript
registerFormField(
name:string,
component: React.JSXElementConstructor
)
```
#### registerFormFields
> 批量注册自定义组件
**签名**
```typescript
registerFormFields(
fieldsMap: {
[key : string]: React.JSXElementConstructor
}
)
```
#### registerFormComponent
> 注册 Form 样式组件
**签名**
```typescript
registerFormComponent(
component:React.JSXElementConstructor
)
```
#### registerFormItemComponent
> 注册 FormItem 样式组件
**签名**
```typescript
registerFormItemComponent(
component:React.JSXElementConstructor
)
```
#### registerVirtualBox
> 注册虚拟盒子组件，主要用于在 JSON Schema 中描述布局
**签名**
```typescript
registerVirtualBox(
name:string,
component:React.JSXElementConstructor
)
```
#### createVirtualBox
> 创建一个虚拟盒子组件，返回的组件可以在 SchemaMarkupForm 中直接使用
**签名**
```typescript
createVirtualBox(
name:string,
component:React.JSXElementConstructor
) : React.FC
```
**用法**
```tsx
import React from 'react'
import {
SchemaMarkupForm as SchemaForm,
SchemaMarkupField as Field,
createVirtualBox
} from '@formily/react-schema-renderer'
import { Card } from 'antd'
const FormCard = createVirtualBox('card', props => {
return
})
export default () => (
)
```
#### createControllerBox
> 创建一个虚拟盒子组件，返回的组件可以在 SchemaMarkupForm 中直接使用，它与 createVirtualBox 的不同主要是组件接收的 props
> createVirtualBox 接收的 props 就是最简单的组件 props
> createControllerBox 接收的是`ISchemaVirtualFieldComponentProps`
**签名**
```typescript
createControllerBox(
name:string,
component:React.JSXElementConstructor
) : React.FC
```
**用法**
```tsx
import React from 'react'
import {
SchemaMarkupForm as SchemaForm,
SchemaMarkupField as Field,
createControllerBox
} from '@formily/react-schema-renderer'
import { Card } from 'antd'
const FormCard = createControllerBox('card', ({ schema, children }) => {
return {children}
})
export default () => (
)
```
#### getRegistry
> 获取注册中心，所有通过 registerFormXXX API 注册的组件都统一在 registry 中管理
**签名**
```typescript
getRegistry(): ISchemaFormRegistry
```
#### cleanRegistry
> 清空注册中心，清除所有通过 registerFormXXX API 注册的组件
**签名**
```typescript
cleanRegistry(): void
```
### Classes
> 整体 Class 完全继承@formily/core，比如 FormPath 与 FormLifeCyle，下面只列举@formily/react-schema-renderer 特有的 Class
#### new Schema(json : ISchema)
> Schema 解析引擎，给定一份满足 JSON Schema 的数据，我们会将其解析成对应的 Schema 实例，可以借助一些工具方法快速处理一些事情，同时该 Schema Class 提供了统一的协议差异抹平能力，保证协议升级的时候可以无缝平滑升级
**属性**
| 属性名 | 描述 | 类型 |
| -------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| title | 字段标题 | `React.ReactNode` |
| name | 字段所属的父节点属性名 | `string` |
| description | 字段描述 | `React.ReactNode` |
| default | 字段默认值 | `any` |
| readOnly | 是否只读与 editable 一致 | `boolean` |
| type | 字段类型 | `'string' | 'object' | 'array' | 'number' | string` |
| enum | 枚举数据 | `Array` |
| const | 校验字段值是否与 const 的值相等 | `any` |
| multipleOf | 校验字段值是否可被 multipleOf 的值整除 | `number` |
| maximum | 校验最大值(大于) | `number` |
| exclusiveMaximum | 校验最大值（大于等于） | `number` |
| minimum | 校验最小值(小于) | `number` |
| exclusiveMinimum | 最小值（小于等于） | `number` |
| maxLength | 校验最大长度 | `number` |
| minLength | 校验最小长度 | `number` |
| pattern | 正则校验规则 | `string | RegExp` |
| maxItems | 最大条目数 | `number` |
| minItems | 最小条目数 | `number` |
| uniqueItems | 是否校验重复 | `boolean` |
| maxProperties | 最大属性数量 | `number` |
| minProperties | 最小属性数量 | `number` |
| required | 必填 | `boolean` |
| format | 正则规则类型 | `InternalFormats` |
| properties | 对象属性 | `{[key : string]:Schema}` |
| items | 数组描述 | `Schema | Schema[]` |
| additionalItems | 额外数组元素描述 | `Schema` |
| patternProperties | 动态匹配对象的某个属性的 Schema | `{[key : string]:Schema}` |
| additionalProperties | 匹配对象额外属性的 Schema | `Schema` |
| editable | 字段是否可编辑 | `boolean` |
| visible | 字段是否可见(数据+样式) | `boolean` |
| display | 字段样式是否可见 | `boolean` |
| x-props | 字段扩展属性 | `{ [name: string]: any }` |
| x-index | 字段顺序 | `number` |
| x-rules | 字段校验规则 | `ValidatePatternRules` |
| x-component | 字段 UI 组件 | `string` |
| x-component-props | 字段 UI 组件属性 | `{}` |
| x-render | 字段扩展渲染函数 | `(props: T & { renderComponent: () => React.ReactElement}) => React.ReactElement` |
| x-effect | 字段副作用触发器 | `(dispatch: (type: string, payload: any) => void,option?:object) => { [key: string]: any }` |
| x-linkages | 字段间联动协议，详细描述可以往后看 | `Array<{ target: FormPathPattern, type: string, [key: string]: any }>` |
| x-mega-props | 字段布局属性 | `{ [name: string]: any }` |
**方法**
##### `get`
> 根据数据路径获取 Schema 子节点
签名
```typescript
get(path?: FormPathPattern): Schema
```
用法
```typescript
const schema = new Schema({
type: 'object',
properties: {
array: {
type: 'array',
items: {
type: 'object',
properties: {
input: {
type: 'string'
}
}
}
}
}
})
schema.get('array[0].input') //{type:"string"}
```
##### `merge`
> 合并 Schema
签名
```typescript
merge(spec:ISchema): Schema
```
用法
```typescript
const schema = new Schema({
type: 'object',
properties: {
array: {
type: 'array',
items: {
type: 'object',
properties: {
input: {
type: 'string'
}
}
}
}
}
})
schema.merge({
title: 'root object'
})
/**
{
type:"object",
title:"root object",
properties:{
array:{
type:'array',
items:{
type:'object',
properties:{
input:{
type:'string'
}
}
}
}
}
}
**/
```
##### `getEmptyValue`
> 基于 Schema 的 type 获取当前 Schema 的空值
签名
```typescript
getEmptyValue() : '' | [] | {} | 0
```
用法
```typescript
const schema = new Schema({
type: 'object',
properties: {
array: {
type: 'array',
items: {
type: 'object',
properties: {
input: {
type: 'string'
}
}
}
}
}
})
schema.get('array.0.input').getEmptyValue() // ''
schema.get('array.0').getEmptyValue() // {}
schema.get('array').getEmptyValue() // []
schema.getEmptyValue() // {}
```
##### `getSelfProps`
> 获取无嵌套 Schema 属性(不会包含 properties/items 这类嵌套属性)
签名
```typescript
getSelfProps() : ISchema
```
用法
```typescript
const schema = new Schema({
type: 'object',
properties: {
array: {
type: 'array',
items: {
type: 'object',
properties: {
input: {
type: 'string'
}
}
}
}
}
})
schema.getSelfProps() // { type:"object" }
```
##### `getExtendsRules`
> 获取扩展校验规则，该方法比较复杂，会解析当前 Schema 的所有校验类型的属性与 x-rules 属性，最终合并为一个统一的 rules 结构
签名
```typescript
getExtendsRules() : ValidateArrayRules
```
用法
```typescript
const schema = new Schema({
type:"string",
required:true,
maxLength:10
"x-rules":{
pattern:/^\d+$/
}
})
schema.getExtendsRules() // [{required:true},{max:10},{pattern:/^\d+$/}]
```
##### `getExtendsRequired`
> 获取是否必填，其实就是读取 Schema 的 required 属性，为什么封装成方法，是为了保证协议升级的时候对用户无感知，我们只需要保证方法的向后兼容即可
签名
```typescript
getExtendsRequired(): void | boolean
```
用法
```typescript
const schema = new Schema({
type:"string",
required:true,
maxLength:10
"x-rules":{
pattern:/^\d+$/
}
})
schema.getExtendsRequired() // true
```
##### `getExtendsEditable`
> 获取 Schema 的 editable 状态，与 getExtendsEditable 能力一致，也是为了抹平协议差异
签名
```typescript
getExtendsEditable() : void | boolean
```
用法
```typescript
const schema1 = new Schema({
type: 'string',
editable: false
})
schema1.getExtendsEditable() // false
const schema2 = new Schema({
type: 'string',
readOnly: true
})
schema2.getExtendsEditable() // false
const schema3 = new Schema({
type: 'string',
'x-props': {
editable: false
}
})
schema3.getExtendsEditable() // false
const schema4 = new Schema({
type: 'string',
'x-component-props': {
editable: false
}
})
schema4.getExtendsEditable() // false
```
##### `getExtendsVisible`
> 获取数据样式可见属性
签名
```typescript
getExtendsVisible(): boolean
```
##### `getExtendsDisplay`
> 获取样式可见属性
签名
```
getExtendsDisplay() : boolean
```
##### `getExtendsTriggerType`
> 获取 triggerType，与 getExtendsEditable 能力一致，都是提供协议差异抹平的能力
签名
```typescript
getExtendsTriggerType() : 'onBlur' | 'onChange' | string
```
用法
```typescript
const schema1 = new Schema({
type: 'string',
'x-props': {
triggerType: 'onBlur'
}
})
schema1.getExtendsTriggerType() // onBlur
const schema2 = new Schema({
type: 'string',
'x-component-props': {
triggerType: 'onBlur'
}
})
schema2.getExtendsTriggerType() // onBlur
const schema3 = new Schema({
type: 'string',
'x-item-props': {
triggerType: 'onBlur'
}
})
schema3.getExtendsTriggerType() // onBlur
```
##### `getExtendsProps`
> 获取 x-props 属性
签名
```typescript
getExtendsProps() : {}
```
##### `getExtendsComponent`
> 获取 x-component 属性
签名
```typescript
getExtendsComponent() : string
```
##### `getExtendsComponentProps`
> 获取 x-component-props 属性，也就是 x-component 的组件属性
签名
```typescript
getExtendsComponentProps() : {}
```
##### `getExtendsRenderer`
> 获取 x-render 属性
签名
```typescript
getExtendsRenderer() : (
props: T & {
renderComponent: () => React.ReactElement
}
) => React.ReactElement
```
##### `getExtendsEffect`
> 获取 x-effect 属性
签名
```typescript
getExtendsEffect() : (
dispatch: (type: string, payload: any) => void,
option?: object
) => { [key: string]: any }
```
##### `setProperty`
> 给当前 Schema 设置 properties
签名
```typescript
setProperty(key: string, schema: ISchema): Schema
```
##### `setProperties`
> 给当前 Schema 批量设置 properties
签名
```typescript
setProperties(properties: {[key : string]:ISchema}) : {[key : string]:Schema}
```
##### `setArrayItems`
> 给当前 Schema 设置 items 属性
签名
```typescript
setArrayItems(schema:Ischema) : Schema
```
##### `getOrderProperties`
> 按照 x-index 顺序给出所有 properties
签名
```typescript
getOrderProperties() : {schema:Schema,key:string}[]
```
##### `mapProperties`
> 按顺序(x-index)遍历 Schema 的 properties 属性
签名
```typescript
mapProperties(callback?: (schema: Schema, key: string) => any):any[]
```
##### `toJSON`
> 输出无循环依赖 json 数据结构
签名
```
toJSON() : ISchema
```
##### `fromJSON`
> 基于一份 json 解析生成 Schema 对象
签名
```typescript
fromJSON(json : ISchema) : Schema
```
##### `isObject`
> 判断当前 Schema 是否是 object 类型
签名
```
isObject() : boolean
```
##### `isArray()`
> 判断当前 Schema 是否是 array 类型
签名
```
isArray() : boolean
```
### Components
---
> 整体组件完全继承@formily/react，下面只列举@formily/react-schema-renderer 特有的组件
#### ``
> 最核心的 JSON Schema 渲染组件
**属性**
```typescript
interface ISchemaFormProps<
Value = any,
DefaultValue = any,
FormEffectPayload = any,
FormActions = ISchemaFormActions | ISchemaFormAsyncActions
> {
//表单值
value?: Value
//表单默认值
defaultValue?: DefaultValue
//表单默认值，弱受控
initialValues?: DefaultValue
//表单actions
actions?: FormActions
//表单effects
effects?: IFormEffect
//form实例
form?: IForm
//表单变化回调
onChange?: (values: Value) => void
//表单提交回调
onSubmit?: (values: Value) => void | Promise
//表单重置回调
onReset?: () => void
//表单校验失败回调
onValidateFailed?: (valideted: IFormValidateResult) => void
//表单子节点
children?: React.ReactElement
//是否开启脏检查
useDirty?: boolean
//是否可编辑
editable?: boolean | ((name: string) => boolean)
//是否开启悲观校验，遇到第一个校验失败，则停止剩余校验
validateFirst?: boolean
//Form Schema对象
schema?: ISchema
//实例级注册自定义组件
fields?: ISchemaFormRegistry['fields']
//实例级注册虚拟盒子组件
virtualFields?: ISchemaFormRegistry['virtualFields']
//实例级注册Form样式组件
formComponent?: ISchemaFormRegistry['formComponent']
//实例级注册FormItem样式组件
formItemComponent?: ISchemaFormRegistry['formItemComponent']
}
```
#### ``
> 基于一个 Data Path，自动寻找 Schema 节点并渲染的内部组件，主要用于在自定义组件内实现递归渲染
**属性**
```typescript
interface ISchemaFieldProps {
//数据路径
path?: FormPathPattern
}
```
#### ``
> 让 SchemaForm 支持 jsx 标签式写法的 Form 组件，需要配合 SchemaMarkupField 一起使用
**属性**
```typescript
interface ISchemaFormProps<
Value = any,
DefaultValue = any,
FormEffectPayload = any,
FormActions = ISchemaFormActions | ISchemaFormAsyncActions
> {
//表单值
value?: Value
//表单默认值
defaultValue?: DefaultValue
//表单默认值，弱受控
initialValues?: DefaultValue
//表单actions
actions?: FormActions
//表单effects
effects?: IFormEffect
//form实例
form?: IForm
//表单变化回调
onChange?: (values: Value) => void
//表单提交回调
onSubmit?: (values: Value) => void | Promise
//表单重置回调
onReset?: () => void
//表单校验失败回调
onValidateFailed?: (valideted: IFormValidateResult) => void
//表单子节点
children?: React.ReactElement
//是否开启脏检查
useDirty?: boolean
//是否可编辑
editable?: boolean | ((name: string) => boolean)
//是否开启悲观校验，遇到第一个校验失败，则停止剩余校验
validateFirst?: boolean
//Form Schema对象
schema?: ISchema
//实例级注册自定义组件
fields?: ISchemaFormRegistry['fields']
//实例级注册虚拟盒子组件
virtualFields?: ISchemaFormRegistry['virtualFields']
//实例级注册Form样式组件
formComponent?: ISchemaFormRegistry['formComponent']
//实例级注册FormItem样式组件
formItemComponent?: ISchemaFormRegistry['formItemComponent']
}
```
**用法**
```tsx
import {
SchemaMarkupForm as SchemaForm,
SchemaMarkupField as Field
} from '@formily/react-schema-renderer'
export default () => {
return (
)
}
```
#### ``
> 让 SchemaForm 支持 jsx 标签式写法的 Field 组件，需要配合 SchemaMarkupForm 一起使用
**属性**
```typescript
type IMarkupSchemaFieldProps = ISchema
```
#### ``
> 核心 Form，与@formily/react 中的 Form 组件一样
#### ``
> 核心 Field，与@formily/react 中的 Field 组件一样，主要用于复杂自定义组件内使用
### Interfaces
---
> 整体继承@formily/react 和@formily/core 的 Interfaces，下面只列举@formily/react-schema-renderer 特有 Interfaces
#### IConnectOptions
> 注册组件桥接器参数
```typescript
interface IConnectOptions {
valueName?: string //值名称，默认是value
eventName?: string //取值回调名称，默认是onChange
defaultProps?: {} //自定义组件默认属性
getValueFromEvent?: (event?: any, value?: any) => any //取值回调处理器，主要用于针对事件参数到最终触发onChange的值做转换合并
getProps?: (
//组件属性转换器，使用它可以轻松的处理从FieldProps到ComponentProps的转换映射等工作
componentProps: {},
fieldProps: MergedFieldComponentProps
) => {} | void
getComponent?: (
//组件转换器，有些场景，根据FieldState，会将组件做动态切换，比如根据editable，会动态切换为文本预览组件之类的
Target: any,
componentProps: {},
fieldProps: MergedFieldComponentProps
) => React.JSXElementConstructor
}
```
#### ISchemaFieldComponentProps
> 自定义组件所接收的属性，非常重要，只要涉及开发自定义组件，都需要了解该协议
```typescript
interface ISchemaFieldComponentProps {
//状态名称，FieldState
displayName?: string
//数据路径
name: string
//节点路径
path: string
//是否已经初始化
initialized: boolean
//是否处于原始态，只有value===intialValues时的时候该状态为true
pristine: boolean
//是否处于合法态，只要errors长度大于0的时候valid为false
valid: boolean
//是否处于非法态，只要errors长度大于0的时候valid为true
invalid: boolean
//是否处于校验态
validating: boolean
//是否被修改，如果值发生变化，该属性为true，同时在整个字段的生命周期内都会为true
modified: boolean
//是否被触碰
touched: boolean
//是否被激活，字段触发onFocus事件的时候，它会被触发为true，触发onBlur时，为false
active: boolean
//是否访问过，字段触发onBlur事件的时候，它会被触发为true
visited: boolean
//是否可见，注意：该状态如果为false，那么字段的值不会被提交，同时UI不会显示
visible: boolean
//是否展示，注意：该状态如果为false，那么字段的值会提交，UI不会展示，类似于表单隐藏域
display: boolean
//是否可编辑
editable: boolean
//是否处于loading状态，注意：如果字段处于异步校验时，loading为true
loading: boolean
//字段多参值，比如字段onChange触发时，给事件回调传了多参数据，那么这里会存储所有参数的值
values: any[]
//字段错误消息
errors: string[]
//字段告警消息
warnings: string[]
//字段值，与values[0]是恒定相等
value: any
//初始值
initialValue: any
//校验规则，具体类型描述参考后面文档
rules: ValidatePatternRules[]
//是否必填
required: boolean
//是否挂载
mounted: boolean
//是否卸载
unmounted: boolean
//字段扩展属性，在SchemaForm下就是ISchema结构
props: ISchema
//当前字段的schema对象
schema: Schema
//当前字段的数据操作函数集
mutators: IMutators
//form实例
form: IForm
//递归渲染函数
renderField: (
addtionKey: string | number,
reactKey?: string | number
) => React.ReactElement
}
```
#### ISchemaVirtualFieldComponentProps
> 虚拟字段组件所接收的属性，只要涉及注册虚拟字段的，都需要了解该协议
```typescript
interface ISchemaVirtualFieldComponentProps {
//状态名称，VirtualFieldState
displayName: string
//字段数据路径
name: string
//字段节点路径
path: string
//是否已经初始化
initialized: boolean
//是否可见，注意：该状态如果为false，UI不会显示，数据也不会提交(因为它是VirtualField)
visible: boolean
//是否展示，注意：该状态如果为false，UI不会显示，数据也不会提交(因为它是VirtualField)
display: boolean
//是否已挂载
mounted: boolean
//是否已卸载
unmounted: boolean
//字段扩展属性
props: ISchema
//当前字段的schema对象
schema: Schema
//form实例
form: IForm
//子元素
children: React.ReactElement[]
//递归渲染函数
renderField: (
addtionKey: string | number,
reactKey?: string | number
) => React.ReactElement
}
```
#### ISchemaFormRegistry
> 组件注册中心，不管是普通字段，还是虚拟字段，还是 Form/FormItem 都会注册在这里
```typescript
interface ISchemaFormRegistry {
fields: {
[key: string]: React.JSXElementConstructor
}
virtualFields: {
[key: string]: React.JSXElementConstructor<
ISchemaVirtualFieldComponentProps
>
}
formItemComponent: React.JSXElementConstructor
formComponent: string | React.JSXElementConstructor
}
```
#### ISchema
> Schema 协议对象，主要用于约束一份 json 结构满足 Schema 协议
```typescript
interface ISchema {
/** base json schema spec**/
title?: React.ReactNode
description?: React.ReactNode
default?: any
readOnly?: boolean
writeOnly?: boolean
type?: 'string' | 'object' | 'array' | 'number' | string
enum?: Array
const?: any
multipleOf?: number
maximum?: number
exclusiveMaximum?: number
minimum?: number
exclusiveMinimum?: number
maxLength?: number
minLength?: number
pattern?: string | RegExp
maxItems?: number
minItems?: number
uniqueItems?: boolean
maxProperties?: number
minProperties?: number
required?: string[] | boolean
format?: string
/** nested json schema spec **/
properties?: {
[key: string]: ISchema
}
items?: ISchema | ISchema[]
additionalItems?: ISchema
patternProperties?: {
[key: string]: ISchema
}
additionalProperties?: ISchema
/** extend json schema specs */
editable?: boolean
//数据与样式是否可见
visible?: boolean
//样式是否可见
display?: boolean
['x-props']?: { [name: string]: any }
['x-index']?: number
['x-rules']?: ValidatePatternRules
['x-component']?: string
['x-component-props']?: { [name: string]: any }
['x-render']?: (
props: T & {
renderComponent: () => React.ReactElement
}
) => React.ReactElement
['x-effect']?: (
dispatch: (type: string, payload: any) => void,
option?: object
) => { [key: string]: any }
}
```
#### ISchemaFormActions
> 核心 actions 继承@formily/react 的 IFormActions，主要增加了 getSchema API
```typescript
interface ISchemaFormActions extends IFormActions {
getSchema(): Schema
getFormSchema(): Schema
}
```
#### ISchemaFormAsyncActions
> 核心 actions 继承@formily/react 的 IFormAsyncActions，主要增加了 getSchema API
```typescript
interface ISchemaFormAsyncActions extends IFormAsyncActions {
getSchema(): Promise
getFormSchema(): Promise
}
```
#### IFormValidateResult
> 校验结果
```typescript
interface IFormValidateResult {
errors: Array<{
path: string
messages: string[]
}>
warnings: Array<{
path: string
messages: string[]
}>
}
```
#### InternalFormats
> 内置格式校验集
```typescript
type InternalFormats =
| 'url'
| 'email'
| 'ipv6'
| 'ipv4'
| 'idcard'
| 'taodomain'
| 'qq'
| 'phone'
| 'money'
| 'zh'
| 'date'
| 'zip'
| string
```
#### ValidateDescription
> 原始校验描述
```typescript
interface ValidateDescription {
//正则规则类型
format?: InternalFormats
//自定义校验规则
validator?: CustomValidator
//是否必填
required?: boolean
//自定以正则
pattern?: RegExp | string
//最大长度规则
max?: number
//最大数值规则
maximum?: number
//封顶数值规则
exclusiveMaximum?: number
//封底数值规则
exclusiveMinimum?: number
//最小数值规则
minimum?: number
//最小长度规则
min?: number
//长度规则
len?: number
//是否校验空白符
whitespace?: boolean
//枚举校验规则
enum?: any[]
//自定义错误文案
message?: string
//自定义校验规则
[key: string]: any
}
```
#### ValidateResponse
```typescript
type SyncValidateResponse =
| null
| string
| boolean
| {
type?: 'error' | 'warning'
message: string
}
type AsyncValidateResponse = Promise
type ValidateResponse = SyncValidateResponse | AsyncValidateResponse
```
#### CustomValidator
> 自定义校验函数
```typescript
type CustomValidator = (
value: any,
description?: ValidateDescription
) => ValidateResponse
```
#### ValidatePatternRules
> 校验规则集
```typescript
type ValidatePatternRules =
| InternalFormats
| CustomValidator
| ValidateDescription
| Array
```