antd ProFormRadio.Group 嵌套使用方法

"@ant-design/pro-form": "^1.65.0",
"antd": "^4.20.2",

不知道是不是版本的问题，在 ProForm 中嵌套使用 Radio 时，直接用 Radio 的写法样式是没有问题，但是会出现选择后表单没有 name 值输出。

最后直接使用 options 选项来搞定，这里记录下写法

<ProFormRadio.Group
  name={"mobile_vendor"}
  label="手机厂家"
  options={[
    {
      value: 'huawei',
      label: '<ProFormRadio.Group
                width="md"
                name="mobile_product"
                label="手机型号"
                options={[
                  {
                    label: 'P70',
                    value: 1,
                  },
                  {
                    label: 'P60',
                    value: 2,
                  },
                ]}
              />',
    },
    {
      value: 'apple',
      label: '<ProFormRadio.Group
                width="md"
                name="mobile_product"
                label="手机型号"
                options={[
                  {
                    label: 'iPhone15ProMax',
                    value: 11,
                  },
                  {
                    label: 'iPhone15Pro',
                    value: 12,
                  },
                ]}
              />',
    },
  ]}
>
</ProFormRadio.Group>

出了嵌套 ProFormRadio 组件，还可以嵌套 ProFormSelect 组件。

顺便记录下，ProFormRadio 嵌套 ProFormSelect 时，在编辑状态会遇到无法使用 select 选择框的问题。相关 issue 见：https://github.com/ant-design/ant-design/issues/25959#issuecomment-671129621

使用一个 span 进行包裹，阻止默认事件即可

<span onClick={(e) => {
  e.preventDefault()
  e.stopPropagation()
}}>
// ProFormSelect 组件 ... 
</span>