{\n mutators.push()\n }}\n >\n Add Element\n \n )\n\n const listUI = value.map((item, index) => {\n return (\n \n \n {\n mutators.remove(index)\n }}\n >\n remove\n \n {\n mutators.moveDown(index)\n }}\n >\n move down\n \n {\n mutators.moveUp(index)\n }}\n >\n move up\n \n
\n )\n })\n\n return value.length == 0 ? emptyUI : listUI\n})\n```\n\nTo implement a self-incrementing list component with recursive rendering is super simple. On the contrary, it would be a bit cumbersome to implement related styles. In short, the core is to use the SchemaField component and the mutators API, the specific API will be described in detail later.\n\n#### How to implement ultra-complex custom components?\n\nThis problem is no solution in the old Formily.It happens that because our business complexity is high to a certain extent, we are limited by this problem, so we must find a way to solve this problem. We can define what is a super complex custom component:\n\n- There are a large number of form components inside the component, and there are also a large number of linkage relationships inside.\n- There is a private server dynamic rendering scheme inside the component.\n\n- There is a complex layout structure inside the component\n\nIn these three points, meet the characteristics of ultra-complex custom components, For this scenario, why can't we solve the problem by properly encapsulating the form of a custom component? In fact, it is mainly limited to verification, there is no way to check the whole, so we need an ability to aggregate a large amount of field processing logic. Let's take a look at the specific solution：\n\n```tsx\nimport React, { Fragment } from 'react'\nimport {\n registerFormField,\n SchemaField,\n FormPath,\n InternalField,\n useFormEffects,\n FormEffectHooks\n} from '@formily/react-schema-renderer'\nimport { Input, Form } from 'antd'\n\nconst FormItem = ({ component, ...props }) => {\n return (\n \n {({ state, mutators }) => {\n const messages = [].concat(state.errors || [], state.warnings || [])\n let status = ''\n if (state.loading) {\n status = 'validating'\n }\n if (state.invalid) {\n status = 'error'\n }\n if (state.warnings && state.warnings.length) {\n status = 'warning'\n }\n return (\n \n {React.createElement(component, {\n ...state.props,\n value: state.value,\n onChange: mutators.change,\n onBlur: mutators.blur,\n onFocus: mutators.focus\n })}\n \n )\n }}\n \n )\n}\n\n//No need to pack with connet\nregisterFormField('complex', ({ path }) => {\n useFormEffects(({ setFieldState }) => {\n FormEffectHooks.onFieldValueChange$('ccc').subscribe(({ value }) => {\n if (value === '123') {\n setFieldState('ddd', state => {\n state.value = 'this is linkage relationship'\n })\n }\n })\n })\n\n return (\n <>\n \n \n \n \n \n )\n})\n```\n\nIn this pseudo-code, we mainly use two core APIs, mainly useFormEffects and InternalField,useFormEffects gives developers a place to write the effects logic locally, so that the effects logic can be easily reused. InternalField is the @formily/react Field component. You can take a look at the @formily/react documentation. SchemaForm also uses @formily/react internally, it can share the same Context, so we can easily use InternalField inside a custom component. Also note that **when using InternalField directly, the name we registered is the root level name, if you want to reuse the path of the current custom component, you can use FormPath to resolve the path, and then concat.**\n\n### API\n\n---\n\n> The overall API fully inherits @formily/core and @formily/react, and only the specific APIs of @formily/react-schema-renderer are listed below.\n\n#### connect\n\n> Custom component registration bridge, a high-level component function (HOC) that is used primarily to quickly access most component library components (components that implement the value/onChange API)\n\n**Signature**\n\n```typescript\nconnect(options?: IConnectOptions): (component : React.JSXElementConstructor)=>(fieldProps:ISchemaFieldComponentProps)=>JSX.Element\n```\n\n**Usage**\n\n```typescript\nimport { registerFormField, connect } from '@formily/react-schema-renderer'\nimport { Select } from 'antd'\nregisterFormField('select', connect()(Select))\n```\n\n#### registerFormField\n\n> Register custom component functions\n\n**Signature**\n\n```typescript\nregisterFormField(\n name:string,\n component: React.JSXElementConstructor\n)\n```\n\n#### registerFormFields\n\n> Bulk registration of custom components\n\n**Signature**\n\n```typescript\nregisterFormFields(\n fieldsMap: {\n [key : string]: React.JSXElementConstructor\n }\n)\n```\n\n#### registerFormComponent\n\n> Register Form Style Component\n\n**Signature**\n\n```typescript\nregisterFormComponent(\n component:React.JSXElementConstructor\n)\n```\n\n#### registerFormItemComponent\n\n> Register the FormItem style component\n\n**Signature**\n\n```typescript\nregisterFormItemComponent(\n component:React.JSXElementConstructor\n)\n```\n\n#### registerVirtualBox\n\n> Register the virtual box component, mainly used to describe the layout in JSON Schema\n\n**Signature**\n\n```typescript\nregisterVirtualBox(\n name:string,\n component:React.JSXElementConstructor\n)\n```\n\n#### createVirtualBox\n\n> Create a virtual box component, the returned component can be used directly in SchemaMarkupForm\n\n**Signature**\n\n```typescript\ncreateVirtualBox(\n name:string,\n component:React.JSXElementConstructor\n) : React.FC\n```\n\n**Usage**\n\n```tsx\nimport React from 'react'\nimport {\n SchemaMarkupForm as SchemaForm,\n SchemaMarkupField as Field,\n createVirtualBox\n} from '@formily/react-schema-renderer'\nimport { Card } from 'antd'\n\nconst FormCard = createVirtualBox('card', props => {\n return \n})\n\nexport default () => (\n \n \n \n \n \n)\n```\n\n#### createControllerBox\n\n> Creating a virtual box component, the returned component can be used directly in SchemaMarkupForm, it is different from createVirtualBox mainly because the component receives the props\n> The props received by createVirtualBox is the simplest component props\n> createControllerBox receives`ISchemaVirtualFieldComponentProps`\n\n**Signature**\n\n```typescript\ncreateControllerBox(\n name:string,\n component:React.JSXElementConstructor\n) : React.FC\n```\n\n**Usage**\n\n```tsx\nimport React from 'react'\nimport {\n SchemaMarkupForm as SchemaForm,\n SchemaMarkupField as Field,\n createControllerBox\n} from '@formily/react-schema-renderer'\nimport { Card } from 'antd'\n\nconst FormCard = createControllerBox('card', ({ schema, children }) => {\n return {children}\n})\n\nexport default () => (\n \n \n \n \n \n)\n```\n\n#### getRegistry\n\n> Get the registry, all components registered through the registerFormXXX API are managed in the registry\n\n**Signature**\n\n```typescript\ngetRegistry(): ISchemaFormRegistry\n```\n\n#### cleanRegistry\n\n> Clear the registry and clear all components registered via the registerFormXXX API\n\n**Signature**\n\n```typescript\ncleanRegistry(): void\n```\n\n### Classes\n\n> The whole Class inherits @formily/core completely, such as FormPath and FormLifeCyle. Only the classes specific to @formily/react-schema-renderer are listed below.\n\n#### new Schema(json : ISchema)\n\n> The Schema parsing engine, given a data that satisfies the JSON Schema, we will parse it into the corresponding Schema instance, and we can quickly process some things with some tool methods. At the same time, the Schema Class provides a unified protocol difference smoothing capability to ensure Seamless and smooth upgrade when the protocol is upgraded\n\n**Attributes**\n\n| Attribute name | Description | Type |\n| -------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| title | Field title | `React.ReactNode` |\n| name | The parent property name of the field | `string` |\n| description | Field description | `React.ReactNode` |\n| default | Field default | `any` |\n| readOnly | Whether read-only and editable | `boolean` |\n| type | Field Type | `'string' | 'object' | 'array' | 'number' | string` |\n| enum | Enumerate data | `Array` |\n| const | Check if the field value is equal to the value of const | `any` |\n| multipleOf | Check if the field value can be divisible by the value of multipleOf | `number` |\n| maximum | Check the maximum value (greater than) | `number` |\n| exclusiveMaximum | Check the maximum value (greater than or equal to) | `number` |\n| minimum | Check minimum value (less than) | `number` |\n| exclusiveMinimum | Minimum value (less than or equal to) | `number` |\n| maxLength | Check maximum length | `number` |\n| minLength | Check minimum length | `number` |\n| pattern | Regular check rule | `string | RegExp` |\n| maxItems | Maximum number of entries | `number` |\n| minItems | Minimum number of entries | `number` |\n| uniqueItems | Whether to check for duplicates | `boolean` |\n| maxProperties | Maximum number of attributes | `number` |\n| minProperties | Minimum number of attributes | `number` |\n| required | Required | `boolean` |\n| format | Regular rule type | `InternalFormats` |\n| properties | Object property | `{[key : string]:Schema}` |\n| items | Array description | `Schema | Schema[]` |\n| additionalItems | Extra array element description | `Schema` |\n| patternProperties | Dynamically match the schema of an attribute of an object | `{[key : string]:Schema}` |\n| additionalProperties | Schema matching the extra attributes of the object | `Schema` |\n| editable | Whether the field is editable | `boolean` |\n| visible | Whether the data and style is visible | `boolean` |\n| display | Whether the style is visible | `boolean` |\n| x-props | Field extension attribute | `{ [name: string]: any }` |\n| x-index | Field order | `number` |\n| x-rules | Field check rule | `ValidatePatternRules` |\n| x-component | Field UI component | `string` |\n| x-component-props | Field UI component properties | `{}` |\n| x-render | Field extension rendering function | `(props: T & { renderComponent: () => React.ReactElement}) => React.ReactElement` |\n| x-effect | Field side effect trigger | `(dispatch: (type: string, payload: any) => void,option?:object) => { [key: string]: any }` |\n\n**Method**\n\n##### `get`\n\n> Get the Schema child node according to the data path\n\nSignature\n\n```typescript\nget(path?: FormPathPattern): Schema\n```\n\nUsage\n\n```typescript\nconst schema = new Schema({\n type: 'object',\n properties: {\n array: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n input: {\n type: 'string'\n }\n }\n }\n }\n }\n})\n\nschema.get('array[0].input') //{type:\"string\"}\n```\n\n##### `merge`\n\n> Merge Schema\n\nSignature\n\n```typescript\nmerge(spec:ISchema): Schema\n```\n\nUsage\n\n```typescript\nconst schema = new Schema({\n type: 'object',\n properties: {\n array: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n input: {\n type: 'string'\n }\n }\n }\n }\n }\n})\n\nschema.merge({\n title: 'root object'\n})\n/**\n{\n type:\"object\",\n title:\"root object\",\n properties:{\n array:{\n type:'array',\n items:{\n type:'object',\n properties:{\n input:{\n type:'string'\n }\n }\n }\n }\n }\n}\n**/\n```\n\n##### `getEmptyValue`\n\n> Get the null value of the current Schema based on the type of Schema\n\nSignature\n\n```typescript\ngetEmptyValue() : '' | [] | {} | 0\n```\n\nUsage\n\n```typescript\nconst schema = new Schema({\n type: 'object',\n properties: {\n array: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n input: {\n type: 'string'\n }\n }\n }\n }\n }\n})\n\nschema.get('array.0.input').getEmptyValue() // ''\nschema.get('array.0').getEmptyValue() // {}\nschema.get('array').getEmptyValue() // []\nschema.getEmptyValue() // {}\n```\n\n##### `getSelfProps`\n\n> Get no nested Schema properties (does not include nested properties like properties/items)\n\nSignature\n\n```typescript\ngetSelfProps() : ISchema\n```\n\nUsage\n\n```typescript\nconst schema = new Schema({\n type: 'object',\n properties: {\n array: {\n type: 'array',\n items: {\n type: 'object',\n properties: {\n input: {\n type: 'string'\n }\n }\n }\n }\n }\n})\n\nschema.getSelfProps() // { type:\"object\" }\n```\n\n##### `getExtendsRules`\n\n> Get the extended check rule. This method is more complicated. It will parse the attributes and x-rules attributes of all the check types of the current Schema, and finally merge them into a unified rules structure.\n\nSignature\n\n```typescript\ngetExtendsRules() : ValidateArrayRules\n```\n\nUsage\n\n```typescript\nconst schema = new Schema({\n type:\"string\",\n required:true,\n maxLength:10\n \"x-rules\":{\n pattern:/^\\d+$/\n }\n})\n\nschema.getExtendsRules() // [{required:true},{max:10},{pattern:/^\\d+$/}]\n```\n\n##### `getExtendsRequired`\n\n> Obtaining whether it is required or not is actually reading the required attribute of the Schema. Why is it encapsulated into a method to ensure that the user is not aware of the protocol upgrade? We only need to ensure backward compatibility of the method.\n\nSignature\n\n```typescript\ngetExtendsRequired(): void | boolean\n```\n\nUsage\n\n```typescript\nconst schema = new Schema({\n type:\"string\",\n required:true,\n maxLength:10\n \"x-rules\":{\n pattern:/^\\d+$/\n }\n})\n\nschema.getExtendsRequired() // true\n```\n\n##### `getExtendsEditable`\n\n> Get the editable state of the Schema, consistent with the getExtendsEditable ability, also to smooth out the protocol differences\n\nSignature\n\n```typescript\ngetExtendsEditable() : void | boolean\n```\n\nUsage\n\n```typescript\nconst schema1 = new Schema({\n type: 'string',\n editable: false\n})\n\nschema1.getExtendsEditable() // false\n\nconst schema2 = new Schema({\n type: 'string',\n readOnly: true\n})\n\nschema2.getExtendsEditable() // false\n\nconst schema3 = new Schema({\n type: 'string',\n 'x-props': {\n editable: false\n }\n})\n\nschema3.getExtendsEditable() // false\n\nconst schema4 = new Schema({\n type: 'string',\n 'x-component-props': {\n editable: false\n }\n})\n\nschema4.getExtendsEditable() // false\n```\n\n##### `getExtendsVisible`\n\n> Get data and style visible property\n\n签名\n\n```typescript\ngetExtendsVisible(): boolean\n```\n\n##### `getExtendsDisplay`\n\n> Get style visible property\n\n签名\n\n```\ngetExtendsDisplay() : boolean\n```\n\n##### `getExtendsTriggerType`\n\n> Get the triggerType, which is consistent with the getExtendsTriggerType capability, and is capable of providing protocol differences.\n\nSignature\n\n```typescript\ngetExtendsTriggerType() : 'onBlur' | 'onChange' | string\n```\n\nUsage\n\n```typescript\nconst schema1 = new Schema({\n type: 'string',\n 'x-props': {\n triggerType: 'onBlur'\n }\n})\n\nschema1.getExtendsTriggerType() // onBlur\n\nconst schema2 = new Schema({\n type: 'string',\n 'x-component-props': {\n triggerType: 'onBlur'\n }\n})\n\nschema2.getExtendsTriggerType() // onBlur\n\nconst schema3 = new Schema({\n type: 'string',\n 'x-item-props': {\n triggerType: 'onBlur'\n }\n})\n\nschema3.getExtendsTriggerType() // onBlur\n```\n\n##### `getExtendsProps`\n\n> Get the x-props attribute\n\nSignature\n\n```typescript\ngetExtendsProps() : {}\n```\n\n##### `getExtendsComponent`\n\n> Get the x-props attribute\n\nSignature\n\n```typescript\ngetExtendsComponent() : string\n```\n\n##### `getExtendsComponentProps`\n\n> Get the x-component-props property, which is the component property of the x-component\n\nSignature\n\n```typescript\ngetExtendsComponentProps() : {}\n```\n\n##### `getExtendsRenderer`\n\n> Get the x-render attribute\n\nSignature\n\n```typescript\ngetExtendsRenderer() : (\n props: T & {\n renderComponent: () => React.ReactElement\n }\n ) => React.ReactElement\n```\n\n##### `getExtendsEffect`\n\n> Get the x-effect attribute\n\nSignature\n\n```typescript\ngetExtendsEffect() : (\n dispatch: (type: string, payload: any) => void,\n option?: object\n) => { [key: string]: any }\n```\n\n##### `setProperty`\n\n> Set properties for the current schema\n\nSignature\n\n```typescript\nsetProperty(key: string, schema: ISchema): Schema\n```\n\n##### `setProperties`\n\n> Set properties for the current Schema batch\n\nSignature\n\n```typescript\nsetProperties(properties: {[key : string]:ISchema}) : {[key : string]:Schema}\n```\n\n##### `setArrayItems`\n\n> Set the items property to the current schema\n\nSignature\n\n```typescript\nsetArrayItems(schema:Ischema) : Schema\n```\n\n##### `getOrderProperties`\n\n> Give all properties in x-index order\n\nSignature\n\n```typescript\ngetOrderProperties() : {schema:Schema,key:string}[]\n```\n\n##### `mapProperties`\n\n> Traverse the properties of the schema in order (x-index)\n\nSignature\n\n```typescript\nmapProperties(callback?: (schema: Schema, key: string) => any):any[]\n```\n\n##### `toJSON`\n\n> Output no loop dependent json data structure\n\nSignature\n\n```\ntoJSON() : ISchema\n```\n\n##### `fromJSON`\n\n> Generate a Schema object based on a json parsing\n\nSignature\n\n```typescript\nfromJSON(json : ISchema) : Schema\n```\n\n##### `isObject`\n\n> Determine whether the current schema is an object type\n\nSignature\n\n```\nisObject() : boolean\n```\n\n##### `isArray()`\n\n> Determine if the current schema is an array type\n\nSignature\n\n```\nisArray() : boolean\n```\n\n### Components\n\n---\n\n> The whole component is completely inherited @formily/react, only the components specific to @formily/react-schema-renderer are listed below.\n\n#### ``\n\n> The core JSON Schema rendering component\n\n**Attributes**\n\n```typescript\ninterface ISchemaFormProps<\n Value = any,\n DefaultValue = any,\n FormEffectPayload = any,\n FormActions = ISchemaFormActions | ISchemaFormAsyncActions\n> {\n //Form value\n value?: Value\n //Form default value\n defaultValue?: DefaultValue\n //Form default value, weakly controlled\n initialValues?: DefaultValue\n //Form actions\n actions?: FormActions\n //Form effects\n effects?: IFormEffect\n //Form instance\n form?: IForm\n //Form change callback\n onChange?: (values: Value) => void\n //Form submission callback\n onSubmit?: (values: Value) => void | Promise\n //Form reset callback\n onReset?: () => void\n //Form validation failure callback\n onValidateFailed?: (valideted: IFormValidateResult) => void\n //Form child node\n children?: React.ReactElement\n //Whether to open the dirty check\n useDirty?: boolean\n //Is it editable\n editable?: boolean | ((name: string) => boolean)\n //Whether to enable pessimistic verification, if the first verification fails, stop the remaining verification\n validateFirst?: boolean\n //Form Schema object\n schema?: ISchema\n //Instance level registration custom component\n fields?: ISchemaFormRegistry['fields']\n //Instance level registration virtual box component\n virtualFields?: ISchemaFormRegistry['virtualFields']\n //Instance level registration Form style component\n formComponent?: ISchemaFormRegistry['formComponent']\n //Instance level registration FormItem style component\n formItemComponent?: ISchemaFormRegistry['formItemComponent']\n}\n```\n\n#### ``\n\n> Based on a Data Path, it automatically finds and renders the internal components of the Schema node, mainly used to implement recursive rendering within the custom component.\n\n**Attributes**\n\n```typescript\ninterface ISchemaFieldProps {\n //Data path\n path?: FormPathPattern\n}\n```\n\n#### ``\n\n> Let SchemaForm support the Form component of jsx tabbed notation, which needs to be used together with SchemaMarkupField\n\n**Attributes**\n\n```typescript\ninterface ISchemaFormProps<\n Value = any,\n DefaultValue = any,\n FormEffectPayload = any,\n FormActions = ISchemaFormActions | ISchemaFormAsyncActions\n> {\n //Form value\n value?: Value\n //Form default value\n defaultValue?: DefaultValue\n //Form default value, weakly controlled\n initialValues?: DefaultValue\n //Form actions\n actions?: FormActions\n //Form effects\n effects?: IFormEffect\n //Form instance\n form?: IForm\n //Form change callback\n onChange?: (values: Value) => void\n //Form submission callback\n onSubmit?: (values: Value) => void | Promise\n //Form reset callback\n onReset?: () => void\n //Form validation failure callback\n onValidateFailed?: (valideted: IFormValidateResult) => void\n //Form child node\n children?: React.ReactElement\n //Whether to open the dirty check\n useDirty?: boolean\n //Is it editable\n editable?: boolean | ((name: string) => boolean)\n //Whether to enable pessimistic verification, if the first verification fails, stop the remaining verification\n validateFirst?: boolean\n //Form Schema object\n schema?: ISchema\n //Instance level registration custom component\n fields?: ISchemaFormRegistry['fields']\n //Instance level registration virtual box component\n virtualFields?: ISchemaFormRegistry['virtualFields']\n //Instance level registration Form style component\n formComponent?: ISchemaFormRegistry['formComponent']\n //Instance level registration FormItem style component\n formItemComponent?: ISchemaFormRegistry['formItemComponent']\n}\n```\n\n**Usage**\n\n```tsx\nimport {\n SchemaMarkupForm as SchemaForm,\n SchemaMarkupField as Field\n} from '@formily/react-schema-renderer'\n\nexport default () => {\n return (\n \n \n \n )\n}\n```\n\n#### ``\n\n> The SchemaForm supports the Field component of jsx tabbed notation, which needs to be used together with SchemaMarkupForm\n\n**Attributes**\n\n```typescript\ntype IMarkupSchemaFieldProps = ISchema\n```\n\n#### ``\n\n> The core Form is the same as the Form component in @formily/react\n\n#### ``\n\n> The core Field, like the Field component in @formily/react, is mainly used in complex custom components.\n\n### Interfaces\n\n---\n\n> Inheriting @formily/react and @formily/core's Interfaces as a whole, only @formily/react-schema-renderer are listed below.\n\n#### IConnectOptions\n\n> Connect parameters for registered components\n\n```typescript\ninterface IConnectOptions {\n valueName?: string //value name\n eventName?: string //get value callback name\n defaultProps?: {} //component default props\n getValueFromEvent?: (event?: any, value?: any) => any //get value from event callback.\n getProps?: (\n //props transformer\n componentProps: {},\n fieldProps: MergedFieldComponentProps\n ) => {} | void\n getComponent?: (\n //component transformer\n Target: any,\n componentProps: {},\n fieldProps: MergedFieldComponentProps\n ) => React.JSXElementConstructor\n}\n```\n\n#### ISchemaFieldComponentProps\n\n> It is very important to customize the properties received by the component. As long as it involves developing custom components, you need to understand the protocol.\n\n```typescript\ninterface ISchemaFieldComponentProps {\n //State name, FieldState\n displayName?: string\n //Data path\n name: string\n //Node path\n path: string\n //Whether it has been initialized\n initialized: boolean\n //Whether it is in the original state, the state is true only when value===intialValues\n pristine: boolean\n //Whether it is in a legal state, as long as the error length is greater than 0, the valid is false.\n valid: boolean\n //Whether it is in an illegal state, as long as the error length is greater than 0, the valid is true.\n invalid: boolean\n //Is it in check state?\n validating: boolean\n //Whether it is modified, if the value changes, the property is true and will be true for the entire lifetime of the field.\n modified: boolean\n //Whether it is touched\n touched: boolean\n //Whether it is activated, it will be triggered to true when the field triggers the onFocus event, and false when onBlur is triggered.\n active: boolean\n //Whether it has been accessed, when the field triggers the onBlur event, it will be triggered to true\n visited: boolean\n //Is it visible, note: if the status is false, the value of the field will not be submitted, and the UI will not display\n visible: boolean\n //Whether to show, note: if the status is false, then the value of the field will be submitted, the UI will not display, similar to the form hidden field\n display: boolean\n //Is it editable\n editable: boolean\n //Whether it is in the loading state, note: if the field is in asynchronous check, loading is true\n loading: boolean\n //The field has multiple parameters. For example, when the field onChange is triggered, multi-parameter data is passed to the event callback, then the values of all parameters are stored here.\n values: any[]\n //Field error message\n errors: string[]\n //Field alert message\n warnings: string[]\n //Field value, which is constant equal to values[0]\n value: any\n //Initial value\n initialValue: any\n //Verification rules, specific type descriptions refer to the following documents\n rules: ValidatePatternRules[]\n //Required or not\n required: boolean\n //Has it been mounted?\n mounted: boolean\n //Has it been unmounted?\n unmounted: boolean\n //Field extension property, under the SchemaForm ISchema structure\n props: ISchema\n //The schema object of the current field\n schema: Schema\n //Current operation data set of the field\n mutators: IMutators\n //Form instance\n form: IForm\n //Recursive rendering function\n renderField: (\n addtionKey: string | number,\n reactKey?: string | number\n ) => React.ReactElement\n}\n```\n\n#### ISchemaVirtualFieldComponentProps\n\n> The attributes received by the virtual field component, as long as it involves registering the virtual field, you need to understand the protocol.\n\n```typescript\ninterface ISchemaVirtualFieldComponentProps {\n //State name, VirtualFieldState\n displayName: string\n //Field data path\n name: string\n //Field node path\n path: string\n //Whether it has been initialized\n initialized: boolean\n //Is it visible, note: if the status is false, the UI will not be displayed, and the data will not be submitted (because it is a VirtualField)\n visible: boolean\n //Whether to show, note: if the state is false, the UI will not be displayed, and the data will not be submitted (because it is a VirtualField)\n display: boolean\n //Has it been mounted?\n mounted: boolean\n //Has it been unmounted?\n unmounted: boolean\n //Field extension attribute\n props: ISchema\n //The schema object of the current field\n schema: Schema\n //Form instance\n form: IForm\n //Child element\n children: React.ReactElement[]\n //Recursive rendering function\n renderField: (\n addtionKey: string | number,\n reactKey?: string | number\n ) => React.ReactElement\n}\n```\n\n#### ISchemaFormRegistry\n\n> The component registry, whether it is a normal field, a virtual field, or a Form/FormItem will be registered here.\n\n```typescript\ninterface ISchemaFormRegistry {\n fields: {\n [key: string]: React.JSXElementConstructor\n }\n virtualFields: {\n [key: string]: React.JSXElementConstructor<\n ISchemaVirtualFieldComponentProps\n >\n }\n formItemComponent: React.JSXElementConstructor\n formComponent: string | React.JSXElementConstructor\n}\n```\n\n#### ISchema\n\n> Schema protocol object, mainly used to constrain a json structure to satisfy the Schema protocol\n\n```typescript\ninterface ISchema {\n /** base json schema spec**/\n title?: React.ReactNode\n description?: React.ReactNode\n default?: any\n readOnly?: boolean\n writeOnly?: boolean\n type?: 'string' | 'object' | 'array' | 'number' | string\n enum?: Array\n const?: any\n multipleOf?: number\n maximum?: number\n exclusiveMaximum?: number\n minimum?: number\n exclusiveMinimum?: number\n maxLength?: number\n minLength?: number\n pattern?: string | RegExp\n maxItems?: number\n minItems?: number\n uniqueItems?: boolean\n maxProperties?: number\n minProperties?: number\n required?: string[] | boolean\n format?: string\n /** nested json schema spec **/\n properties?: {\n [key: string]: ISchema\n }\n items?: ISchema | ISchema[]\n additionalItems?: ISchema\n patternProperties?: {\n [key: string]: ISchema\n }\n additionalProperties?: ISchema\n /** extend json schema specs */\n visible?: boolean //Field initial visible status(Whether the data is visible)\n display?: boolean //Field initial display status(Whether the style is visible)\n editable?: boolean\n ['x-props']?: { [name: string]: any }\n ['x-index']?: number\n ['x-rules']?: ValidatePatternRules\n ['x-linkages']?: Array<{\n target: FormPathPattern\n type: string\n [key: string]: any\n }>\n ['x-mega-props']?: { [name: string]: any }\n ['x-component']?: string\n ['x-component-props']?: { [name: string]: any }\n ['x-render']?: (\n props: T & {\n renderComponent: () => React.ReactElement\n }\n ) => React.ReactElement\n ['x-effect']?: (\n dispatch: (type: string, payload: any) => void,\n option?: object\n ) => { [key: string]: any }\n}\n```\n\n#### ISchemaFormActions\n\n> The core actions inherit @formily/react's IFormActions, mainly adding the getSchema API\n\n```typescript\ninterface ISchemaFormActions extends IFormActions {\n getSchema(): Schema\n getFormSchema(): Schema\n}\n```\n\n#### ISchemaFormAsyncActions\n\n> Core actions inherit @formily/react's IFormAsyncActions, mainly adding the getSchema API\n\n```typescript\ninterface ISchemaFormAsyncActions extends IFormAsyncActions {\n getSchema(): Promise\n getFormSchema(): Promise\n}\n```\n\n#### IFormValidateResult\n\n> Calibration result\n\n```typescript\ninterface IFormValidateResult {\n errors: Array<{\n path: string\n messages: string[]\n }>\n warnings: Array<{\n path: string\n messages: string[]\n }>\n}\n```\n\n#### InternalFormats\n\n> Built-in format checksum\n\n```typescript\ntype InternalFormats =\n | 'url'\n | 'email'\n | 'ipv6'\n | 'ipv4'\n | 'idcard'\n | 'taodomain'\n | 'qq'\n | 'phone'\n | 'money'\n | 'zh'\n | 'date'\n | 'zip'\n | string\n```\n\n#### ValidateDescription\n\n> Original check description\n\n```typescript\ninterface ValidateDescription {\n // built-in rules，ref: string rules\n format?: InternalFormats\n // custom validation\n validator?: CustomValidator\n // required\n required?: boolean\n // pattern\n pattern?: RegExp | string\n // max length\n max?: number\n // maximum\n maximum?: number\n // exclusiveMaximum\n exclusiveMaximum?: number\n // exclusiveMinimum\n exclusiveMinimum?: number\n // minimum\n minimum?: number\n // min\n min?: number\n // length\n len?: number\n // whitespace\n whitespace?: boolean\n // enum\n enum?: any[]\n // error message\n message?: string\n [key: string]: any\n}\n```\n\n#### ValidateResponse\n\n```typescript\ntype SyncValidateResponse =\n | null\n | string\n | boolean\n | {\n type?: 'error' | 'warning'\n message: string\n }\ntype AsyncValidateResponse = Promise\ntype ValidateResponse = SyncValidateResponse | AsyncValidateResponse\n```\n\n#### CustomValidator\n\n> Custom check function\n\n```typescript\ntype CustomValidator = (\n value: any,\n description?: ValidateDescription\n) => ValidateResponse\n```\n\n#### ValidatePatternRules\n\n> Verification rule set\n\n```typescript\ntype ValidatePatternRules =\n | InternalFormats\n | CustomValidator\n | ValidateDescription\n | Array\n```\n","readmeFilename":"README.md"}