首页 > 建站教程 > 前端框架 >  [antd: Form.Item] `children` is array of render props cannot正文

[antd: Form.Item] `children` is array of render props cannot

react antd出现这个错误:
[antd: Form.Item] `children` is array of render props cannot have `name`.


如果在Form.Item里面嵌套超过两个子元素,就会出现上面的错误,代码类似于下面:
<Form.Item
  label="姓名"
  name="name"
  rules={[{ required: true, whitespace: true }]}
>
      <Input placeholder="请输入联系人姓名" maxLength={50} allowClear onChange={onChange} />
    <span style={{color:'#999', display: 'block', textAlign: 'right'}}>({nameLength}/50)</span>
</Form.Item>
表现:默认值无法赋值上去,并且会报上面的错。

解决方案:
<Form.Item
  label="姓名"
  rules={[{ required: true, whitespace: true }]}
>
  <Form.Item name="name" noStyle>
    <Input placeholder="请输入联系人姓名" maxLength={50} allowClear onChange={onChange} />
  </Form.Item>
  <span style={{color:'#999', display: 'block', textAlign: 'right',}}>({nameLength}/50)</span>
</Form.Item>
官方解释:<Form.Item name="field" /> 只会对它的直接子元素绑定表单功能,例如直接包裹了 Input/Select。如果控件前后还有一些文案或样式装点,或者一个表单项内有多个控件,你可以使用内嵌的 Form.Item 完成。你可以给 Form.Item 自定义 style 进行内联布局,或者添加 noStyle 作为纯粹的无样式绑定组件(类似 3.x 中的 getFieldDecorator)。