antd 版本 4.25
在项目中,需要通过数据动态生成表单,根据输入方式,选择用input 还是select 。于是,按照之前是思路 就是在Form.Item里做判断。
<Form form={form}>
{
properties.map((property)=><Form.Item key={property.id} label={property.name} name={property.id}>
{ property.inputMode === 'INPUT' && <Input/> }
{ property.inputMode === 'SELECT' && <Select/> }
</Form.Item>)
}
</Form>
页面是正常展示了,但是报了warring
Warning: [antd: Form.Item] `children` is array of render props cannot have `name`.
经过各种搜索,最后知道是因为 Form.Item 在有name属性的时候 ,里面只能的符合要求的表单控件,不能像这里这样在Form.Item里去做判断的。
代码调整如下:
<Form form={form}>
{
properties.map((property)=><Form.Item key={property.id} label={property.name} >
{ property.inputMode === 'INPUT' && <Form.Item name={property.id} noStyle><Input/></Form.Item> }
{ property.inputMode === 'SELECT' && <Form.Item name={property.id} noStyle><Select/></Form.Item> }
</Form.Item>)
}
</Form>
或者这样:
<Form form={form}>
{
properties.map((property)=><div >
{ property.inputMode === 'INPUT' && <Form.Item key={property.id} label={property.name} name={property.id} ><Input/></Form.Item> }
{ property.inputMode === 'SELECT' && <Form.Item key={property.id} label={property.name} name={property.id} ><Select/></Form.Item> }
</div>)
}
</Form>
参考链接:https://ant.design/components/form-cn/#components-form-demo-complex-form-control