第2世界
发布于 2023-04-21 / 11 阅读 / 0 评论 / 0 点赞

antd使用Form.Item提示Warning: [antd: Form.Item] is array of render props cannot have .

antd使用Form.Item提示:

Warning: [antd: Form.Item] children is array of render props cannot have name.

原代码:

<Form.Item {...formItemLayout} name='name' label="分组名称" rules={[{required: true}]}>
  <Input style={{width: '80%'}}/>
  <MinusCircleOutlined
    className="dynamic-delete-button ml-2"
    onClick={() => console.log("delete group " + index)}
  />
</Form.Item>

Form.Item只会对它的直接子元素绑定表单功能,例如直接包裹了 Input/Select。如果控件前后还有一些文案或样式装点,或者一个表单项内有多个控件,你可以使用内嵌的 Form.Item 完成。你可以给 Form.Item 自定义 style 进行内联布局,或者添加 noStyle 作为纯粹的无样式绑定组件。更改成下面代码,警告消除:

<Form.Item {...formItemLayout} label="分组名称" rules={[{required: true}]}>
  <Form.Item name="name" noStyle><Input style={{width: '80%'}}/></Form.Item>
  <MinusCircleOutlined
    className="dynamic-delete-button ml-2"
    onClick={() => console.log("delete group " + index)}
  />
</Form.Item>


评论