RecordScope
Description
Standard scoped injection component, injecting the following built-in variables into the Schema expressions of the subtree:
$recordcurrent record data$record.$lookupthe parent record of the current record, you can always look up$record.$indexthe index of the current record$indexthe current record index, equivalent to$record.$index, considering that if the record data is not an object, it needs to be read independently$lookupthe parent record of the current record, equivalent to$record.$lookup, considering that if the record data is not an object, it needs to be read independently
Mainly used for scenarios such as self-incrementing lists and tables that need to render recursively with row data, usually used together with RecordsScope.
Usage Convention
Any auto-incrementing list extension component should use RecordScope internally to pass record scope variables.
Usage
tsx
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider, RecordScope } from '@silver-formily/react'
import { Input } from 'antd'
const form = createForm()
function MyCustomComponent(props) {
return (
<RecordScope getRecord={() => props.record} getIndex={() => props.index}>
{props.children}
</RecordScope>
)
}
const SchemaField = createSchemaField({
components: {
Input,
MyCustomComponent,
},
})
export default () => (
<FormProvider form={form}>
<SchemaField
schema={{
type: 'object',
properties: {
lookup: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
record: {
name: 'Lookup Name',
code: 'Lookup Code',
},
index: 1,
},
'properties': {
record: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
record: {
name: 'Name',
code: 'Code',
},
index: 0,
},
'properties': {
input: {
'type': 'string',
'x-component': 'Input',
'x-value': `{{\`\${$record.name} \${$record.code} \${$record.$index} \${$record.$lookup.name} \${$record.$lookup.code} \${$index} \${$lookup.name} \${$lookup.code} \`}}`,
},
},
},
},
},
},
}}
/>
</FormProvider>
)tsx
import { createForm } from '@silver-formily/core'
import { createSchemaField, FormProvider, RecordScope } from '@silver-formily/react'
import { Input } from 'antd'
const form = createForm()
function MyCustomComponent(props) {
return (
<RecordScope getRecord={() => props.record} getIndex={() => props.index}>
{props.children}
</RecordScope>
)
}
const SchemaField = createSchemaField({
components: {
Input,
MyCustomComponent,
},
})
export default () => (
<FormProvider form={form}>
<SchemaField
schema={{
type: 'object',
properties: {
lookup: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
record: {
name: 'Lookup Name',
code: 'Lookup Code',
},
index: 1,
},
'properties': {
record: {
'type': 'void',
'x-component': 'MyCustomComponent',
'x-component-props': {
record: {
name: 'Name',
code: 'Code',
},
index: 0,
},
'properties': {
input: {
'type': 'string',
'x-component': 'Input',
'x-value': `{{\`\${$record.name} \${$record.code} \${$record.$index} \${$record.$lookup.name} \${$record.$lookup.code} \${$index} \${$lookup.name} \${$lookup.code} \`}}`,
},
},
},
},
},
},
}}
/>
</FormProvider>
)查看源码
API
| Attribute | Description | Type | Default |
|---|---|---|---|
| getRecord | Function that returns the current row record | Function | - |
| getIndex | Function that returns the current row index | Function | - |
| children | Child nodes | React.ReactNode | - |
getRecord is required; getIndex and children are optional. Without getIndex, $index is undefined. The getters read current values; non-object records are returned directly without $lookup / $index properties attached.