RecordsScope
Description
Standard scoped injection component, injecting the following built-in variable into the Schema expressions of the subtree:
$recordscurrent record list data
Usually used together with RecordScope: RecordsScope provides the data source for the whole list, and RecordScope injects the current row record when each row is rendered.
Usage Convention
Any auto-incrementing list extension component should use RecordsScope internally to pass record scope variables.
Usage
tsx
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider, RecordsScope } from '@silver-formily/react'
import { Input } from 'antd'
const form = createForm()
function MyCustomComponent(props) {
return (
<RecordsScope getRecords={() => props.records}>
{props.children}
</RecordsScope>
)
}
const SchemaField = createSchemaField({
components: {
Input,
MyCustomComponent,
},
})
export default () => (
<FormProvider form={form}>
<SchemaField
schema={{
type: 'object',
properties: {
records: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
records: [
{
name: 'Name',
code: 'Code',
},
],
},
'properties': {
input: {
'type': 'string',
'x-component': 'Input',
'x-value': `{{\`\${$records[0].name} \${$records[0].code} \`}}`,
},
},
},
},
}}
/>
</FormProvider>
)tsx
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider, RecordsScope } from '@silver-formily/react'
import { Input } from 'antd'
const form = createForm()
function MyCustomComponent(props) {
return (
<RecordsScope getRecords={() => props.records}>
{props.children}
</RecordsScope>
)
}
const SchemaField = createSchemaField({
components: {
Input,
MyCustomComponent,
},
})
export default () => (
<FormProvider form={form}>
<SchemaField
schema={{
type: 'object',
properties: {
records: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
records: [
{
name: 'Name',
code: 'Code',
},
],
},
'properties': {
input: {
'type': 'string',
'x-component': 'Input',
'x-value': `{{\`\${$records[0].name} \${$records[0].code} \`}}`,
},
},
},
},
}}
/>
</FormProvider>
)查看源码
API
| Attribute | Description | Type | Default |
|---|---|---|---|
| getRecords | Function that returns the current record collection | Function | - |
| children | Child nodes | React.ReactNode | - |
getRecords is required in the public type; children is optional. The $records getter returns [] when the callback returns a nullish value at runtime.