解决antd 4.x中动态配置表单的告警问题
antd动态配置表单

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

暂无评论