Silver Formily React0.0.0-alpha.1

English

简体中文

English

简体中文

Appearance

Field ​

This page only covers the types that @silver-formily/react adds or consolidates at the field component layer.

Core models such as Field, ArrayField, ObjectField, VoidField, GeneralField and Form all belong to @silver-formily/core; see the Field model documentation and the Form model documentation directly.

JSXComponent ​

The unified constraint for all component mappings on the React side; it can be a native tag name or a component constructor:

ts
import type React from 'react'

type JSXComponent
  = | keyof React.JSX.IntrinsicElements
    | React.JSXElementConstructor<any>

IProviderProps ​

The props of FormProvider are very thin; it only provides a Form instance to the subtree:

ts
import type { Form } from '@silver-formily/core'
import type React from 'react'

type IProviderProps = {
  form: Form
  children?: React.ReactNode
}

RenderPropsChildren<Payload> ​

The children of the React field components supports the render props pattern; the render function receives the field instance and the form instance:

ts
import type { Form } from '@silver-formily/core'
import type React from 'react'

type RenderPropsChildren<Payload>
  = | ((field: Payload, form: Form) => React.ReactNode)
    | React.ReactNode

IFieldProps ​

The React field props are based on Core's IFieldFactoryProps and extend children and decoratorContent with React semantics:

ts
import type { Field as FieldType, IFieldFactoryProps } from '@silver-formily/core'
import type { DecoratorContent, JSXComponent, RenderPropsChildren } from '@silver-formily/react'
import type React from 'react'

interface IFieldProps<
  D extends JSXComponent,
  C extends JSXComponent,
  Field = FieldType,
> extends IFieldFactoryProps<D, C> {
  children?: RenderPropsChildren<Field>
  decoratorContent?: DecoratorContent
  decorator?: [] | [D] | [D, Partial<React.ComponentProps<NoInfer<D>>>]
  component?: [] | [C] | [C, Partial<React.ComponentProps<NoInfer<C>>>]
}

Field, ArrayField and ObjectField all share the same props; only the Field generic parameter is narrowed to the corresponding field model.

IVoidFieldProps ​

VoidField has no value semantics; its props come from Core's IVoidFieldFactoryProps:

ts
import type { IVoidFieldFactoryProps, VoidField } from '@silver-formily/core'
import type { DecoratorContent, JSXComponent, RenderPropsChildren } from '@silver-formily/react'
import type React from 'react'

interface IVoidFieldProps<
  D extends JSXComponent,
  C extends JSXComponent,
  Field = VoidField,
> extends IVoidFieldFactoryProps<D, C> {
  children?: RenderPropsChildren<Field>
  decoratorContent?: DecoratorContent
  decorator?: [] | [D] | [D, Partial<React.ComponentProps<NoInfer<D>>>]
  component?: [] | [C] | [C, Partial<React.ComponentProps<NoInfer<C>>>]
}

IFormSpyProps ​

The props of FormConsumer; children must be a render function that receives the Form:

ts
import type { Form } from '@silver-formily/core'
import type React from 'react'

interface IFormSpyProps {
  children?: (form: Form) => React.ReactNode
}

IComponentMapper<T> ​

The mapper signature of connect, converting one component into another:

ts
import type { JSXComponent } from '@silver-formily/react'

interface IComponentMapper<T extends JSXComponent> {
  (target: T): JSXComponent
}

IStateMapper<Props> ​

It describes "how to project field state onto component props". It can be a key-mapping object, or a function:

ts
import type { Field as FieldType, GeneralField } from '@silver-formily/core'

type IStateMapper<Props>
  = | {
    [key in keyof FieldType]?: keyof Props | boolean
  }
  | ((props: Props, field: GeneralField) => Props)

If you need to understand the full attributes of Field or GeneralField, go back to the Core Field documentation. This page only keeps the information about how the React side consumes these models.

Component and decorator tuples accept [], [Component], or [Component, partialProps]. Supplied props are checked against the selected component; omitted props may be supplied by the form model. false is not part of these declarations. NoInfer requires TypeScript 5.4 or newer.