mapProps
Description
An adapter function that maps Field attributes to component attributes, mainly used together with the connect function.
Signature
ts
import type { IStateMapper, JSXComponent } from '@silver-formily/react'
import type React from 'react'
declare function mapProps<T extends JSXComponent>(
...mappers: IStateMapper<React.ComponentProps<T>>[]
): (target: T) => React.ComponentType<any>- The argument can be an object (the key is a field attribute and the value is a component attribute; if the value is
true, the mapped attribute name is the same) - The argument can be a function, which can map the attributes in more complex ways
Usage
tsx
import { createForm, isVoidField, setValidateLanguage } from '@silver-formily/core'
import { connect, Field, FormConsumer, FormProvider, mapProps } from '@silver-formily/react'
import { Button, Form, Input } from 'antd'
setValidateLanguage('en')
// 对象映射器：key 是字段属性，value 是组件属性（为 true 时属性名相同）
// 函数映射器：直接改写组件 props，可以做更复杂的计算
const FormItem = connect(
Form.Item,
mapProps(
{
title: 'label',
description: 'extra',
required: true,
validateStatus: true,
},
(props, field) => ({
...props,
help: !isVoidField(field) && field.selfErrors.length
? field.selfErrors.join(', ')
: undefined,
}),
),
)
const form = createForm({ validateFirst: true })
function log(...args: unknown[]) {
console.log(...args)
}
function handleSubmit() {
form.submit(log)
}
export default function Demo() {
return (
<FormProvider form={form}>
<Form layout="vertical">
<Field
name="name"
title="Name"
required
decorator={[FormItem]}
component={[Input, { placeholder: 'Please Input' }]}
/>
<FormConsumer>
{_form => (
<>
<div style={{ whiteSpace: 'pre', marginBottom: 16 }}>
{JSON.stringify(_form.values, null, 2)}
</div>
<Button type="primary" onClick={handleSubmit}>
Submit
</Button>
</>
)}
</FormConsumer>
</Form>
</FormProvider>
)
}tsx
import { createForm, isVoidField, setValidateLanguage } from '@silver-formily/core'
import { connect, Field, FormConsumer, FormProvider, mapProps } from '@silver-formily/react'
import { Button, Form, Input } from 'antd'
setValidateLanguage('en')
// 对象映射器：key 是字段属性，value 是组件属性（为 true 时属性名相同）
// 函数映射器：直接改写组件 props，可以做更复杂的计算
const FormItem = connect(
Form.Item,
mapProps(
{
title: 'label',
description: 'extra',
required: true,
validateStatus: true,
},
(props, field) => ({
...props,
help: !isVoidField(field) && field.selfErrors.length
? field.selfErrors.join(', ')
: undefined,
}),
),
)
const form = createForm({ validateFirst: true })
function log(...args: unknown[]) {
console.log(...args)
}
function handleSubmit() {
form.submit(log)
}
export default function Demo() {
return (
<FormProvider form={form}>
<Form layout="vertical">
<Field
name="name"
title="Name"
required
decorator={[FormItem]}
component={[Input, { placeholder: 'Please Input' }]}
/>
<FormConsumer>
{_form => (
<>
<div style={{ whiteSpace: 'pre', marginBottom: 16 }}>
{JSON.stringify(_form.values, null, 2)}
</div>
<Button type="primary" onClick={handleSubmit}>
Submit
</Button>
</>
)}
</FormConsumer>
</Form>
</FormProvider>
)
}查看源码
Mappers run left to right against a shallow copy of incoming props. Function results are merged into that copy. Object mappings overwrite the destination with the field value, except when the field value is nullish and the destination already has a non-nullish value. Both boolean values use the source property name: false does not disable mapping. Mapping value to another name removes the original value prop. Use this adapter beneath a field context.