SchemaField ​

Description ​

The SchemaField component is dedicated to parsing JSON Schema and dynamically rendering forms.

There are two ways to use SchemaField: MarkupSchema and JSONSchema. MarkupSchema rendering categorizes the different types of Field, which makes it more readable; JSONSchema renders JSON Schema directly, staying closer to the underlying implementation.

Factory and return types ​

The options object is optional. Import the actual API types to preserve registry inference instead of declaring a non-generic ComponentType approximation:

import type {
  ISchemaFieldReactFactoryOptions,
  SchemaReactComponents,
} from '@silver-formily/react'
import { createSchemaField } from '@silver-formily/react'

type FactoryOptions<C extends SchemaReactComponents> = ISchemaFieldReactFactoryOptions<C>
type SchemaFieldComponent<C extends SchemaReactComponents> = ReturnType<typeof createSchemaField<C>>
type MarkupComponent<C extends SchemaReactComponents> = SchemaFieldComponent<C>['Markup']

Factory options are components?: Components and scope?: any. The returned component has Markup, String, Object, Array, Boolean, Number, Date, DateTime, and Void statics. Markup preserves registry inference and supports explicit <Decorator, Component> type arguments. Typed statics set their own schema type, overriding a supplied type.

MarkupSchema ​

Usage ​

import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { Form, Input } from 'antd'

const form = createForm()

// createSchemaField 返回的 SchemaField 上挂载了各 Markup 子组件
const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem: Form.Item,
  },
})

export default function Demo() {
  return (
    <FormProvider form={form}>
      <SchemaField>
        <SchemaField.String
          name="input"
          x-decorator="FormItem"
          x-decorator-props={{ label: '输入' }}
          x-component="Input"
          x-component-props={{ placeholder: '请输入' }}
        />
      </SchemaField>
    </FormProvider>
  )
}

import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { Form, Input } from 'antd'

const form = createForm()

// createSchemaField 返回的 SchemaField 上挂载了各 Markup 子组件
const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem: Form.Item,
  },
})

export default function Demo() {
  return (
    <FormProvider form={form}>
      <SchemaField>
        <SchemaField.String
          name="input"
          x-decorator="FormItem"
          x-decorator-props={{ label: '输入' }}
          x-component="Input"
          x-component-props={{ placeholder: '请输入' }}
        />
      </SchemaField>
    </FormProvider>
  )
}

JSON Schema ​

SchemaField supports passing a JSON Schema object directly to render a form.

import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { Input } from 'antd'

const form = createForm()

const SchemaField = createSchemaField({
  components: {
    Input,
  },
})

const schema = {
  type: 'object',
  properties: {
    input: {
      'type': 'string',
      'x-component': 'Input',
    },
  },
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      {/* 直接传入 JSON Schema 对象渲染 */}
      <SchemaField schema={schema} />
    </FormProvider>
  )
}

import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/react'
import { Input } from 'antd'

const form = createForm()

const SchemaField = createSchemaField({
  components: {
    Input,
  },
})

const schema = {
  type: 'object',
  properties: {
    input: {
      'type': 'string',
      'x-component': 'Input',
    },
  },
}

export default function Demo() {
  return (
    <FormProvider form={form}>
      {/* 直接传入 JSON Schema 对象渲染 */}
      <SchemaField schema={schema} />
    </FormProvider>
  )
}

API ​

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

type SchemaProps<D extends JSXComponent, C extends JSXComponent> = ISchemaFieldProps<D, C>

All props are optional. schema?: ISchema, name?: SchemaKey, components?: SchemaReactComponents, scope?: any, and children?: React.ReactNode form the main rendering API. Without schema, children describe Markup schemas; when schema is supplied, Markup children are ignored. Markup nodes without a truthy name receive a generated name.

Local component and scope entries override matching factory entries through lazy merging. Field configuration is produced from the schema by toFieldProps; although the declaration inherits Core factory props (except required name), this is not the same as forwarding every Field prop to rendered fields. Put field configuration in the schema. Omitting name renders root properties; it does not create an implicit root field.