[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）。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！