antd FormItem嵌套FormItem的适用场景

需求：表单中需要在item后面添加文字备注，如果不使用FormItem嵌套FormItem时，编辑操作的时候会出现回填不成功的问题。

 当不使用formItem嵌套的时候：这时候点击编辑的时候，数据获取到了但是没有在页面中回填，原因是<FormItem></FormItem>中的根元素只能是一个表单控件标签，不能是<>或者是<div>等。

const formData = [
    {
      id: 'name',
      label: '广告名称',
      rules: [{ required: true, message:'请输入' }],
      children: <>
        <Input allowClear placeholder='请输入' />
        <span>表单项的备注说明--广告名称</span>
      </>,
    },
    {
      id: 'position',
      label: '广告位置',
      rules: [{ required: true, message:'请选择' }],
      children: <>
        <Select
          placeholder='请选择'
          onChange={(value) => {
            setPosition(value);
            form.setFieldsValue({
              position: value,
            });
          }}
        >
          {positionOption}
        </Select>
        <span>表单项的备注说明--广告位置</span>
      </>,
    },
]
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
     {formData.map((item, index) => {
          const key = `${index}_formDataItem`;
          return (
            <Col key={key} xs={24} sm={24} md={12} lg={8} xl={6}>
              <FormItem label={item.label} name={item.id}>
                {item.children}
              </FormItem>
            </Col>
          );
       })}
</Row>

这时候就该使用<FormItem></FormItem>嵌套解决问题，代码如下：

const formData = [
    {
      id: 'name',
      label: '广告名称',
      rules: [{ required: true, message: '请输入' }],
      remark: <span>备注说明--广告名称</span>,
      children: <Input allowClear placeholder='请输入' />,
    },
    {
      id: 'position',
      label: '广告位置',
      rules: [{ required: true, message: '请选择' }],
      remark: <span>备注说明--广告位置</span>,
      children: (
        <Select
          placeholder='请选择'
          onChange={(value) => {
            setPosition(value);
            form.setFieldsValue({
              position: value,
            });
          }}
        >
          {positionOption}
        </Select>
      ),
    },
]
<Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 16 }}>
        {formData.map(({ id, label, rules, hidden, children, remark }) => {
          return (
            <FormItem
              key={id}
              label={label}
              hidden={hidden}
              required={id !== 'remarks' && true} // 手动添加required 属性
            >
              <div className="flex items-center">
                <Col span={id === 'image' ? 4 : 18} className="mr-4">
                  <FormItem name={id} rules={rules} noStyle>
                    {children}
                  </FormItem>
                </Col>
                <span>{remark}</span>
              </div>
            </FormItem>
          );
        })}
      </Form>

这时候就解决了编辑时回填的问题。

这时候又会出现另一个问题就是：“必填项的红色*在页面中没有出现，也就是<FormItem rules={rules}>绑定rules后红色*必填提示没有生效”，这时解决这个问题的办法就是在<FromItem>标签中手动添加 required属性。