react最终形式添加额外的字段作为道具

Question

你好，我有两个表单，只有一个字段不同。因此，我正在考虑创建一个通用表单组件，并只将额外的字段作为可选属性传递。

常见形式：

import { Form as ReactFinalForm, Field } from "react-final-form";
import Form from 'react-bootstrap/Form';
interface CommonFormProps {
onSubmit: (values: any) => void;
extraFields?: typeof Field[];
}
export default function CommonForm(props: CommonFormProps) {
return (
<ReactFinalForm
onSubmit={values => {
props.onSubmit(values);
}}
render={({ handleSubmit, form, submitting, pristine, values}) => (
<Form onSubmit={handleSubmit}>
// other fields
{props.extraFields}
</Form>
)}
/>
);
}

需要额外字段的表单

export default function FormB() {
return (
<CommonForm
extraFields={<Field name="price" validate={required} >
{({ input, meta }) => (
<Form.Group as={Form.Row} controlId="price">
<Form.Label column sm={4}>
Price
</Form.Label>
<Col sm={8}>
<Form.Control type="text" {...input} />
</Col>
</Form.Group>
)}
</Field>}
/>
);
}

我试图将extraFields定义为typeofField[]或typeofField。它没有区别，错误总是

类型"Element"不可分配给类型"<字段值=任意，RP扩展FieldRenderProps<字段值，T>=FieldRenderProps<字段值，HTML元素>，T扩展HTMLElement=HTMLElement>(道具：字段道具<gt；(=>ReactElement<gt；'。类型"Element"不提供匹配签名'<FieldValue=任意，RP扩展FieldRenderProps<字段值，T>=FieldRenderProps<字段值，HTML元素>，T扩展HTMLElement=HTMLElement>(道具：字段道具<gt；(：ReactElement<gt；'。ts(2322(索引。tsx(16，5(：预期类型来自

有人能帮忙解决这个问题吗？

Answer 1

作为孩子而不是道具通过：

export default function FormB() {
return (
<CommonForm>
<Field name="price" validate={required} >
{({ input, meta }) => (
<Form.Group as={Form.Row} controlId="price">
<Form.Label column sm={4}>
Price
</Form.Label>
<Col sm={8}>
<Form.Control type="text" {...input} />
</Col>
</Form.Group>
)}
</Field>}
</CommonForm>);
}

然后使用儿童

export default function CommonForm(props: CommonFormProps) {
return (
<ReactFinalForm
onSubmit={values => {
props.onSubmit(values);
}}
render={({ handleSubmit, form, submitting, pristine, values}) => (
<Form onSubmit={handleSubmit}>
// other fields
{props.children}
</Form>
)}
/>
);
}

儿童可以是空的