ant Design Form表单，Form.List/Form.Item实现动态切换

在Form.List中，动态新增多个由Space包裹的Form.Item,样例如下:

const areas = [
  {
    label: 'Beijing',
    value: 'Beijing',
  },
  {
    label: 'Shanghai',
    value: 'Shanghai',
  },
];
const sights = {
  Beijing: ['Tiananmen', 'Great Wall'],
  Shanghai: ['Oriental Pearl', 'The Bund'],
};

<Form.List name="sights">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Space key={field.key} align="baseline">
                <Form.Item
                  noStyle
                  shouldUpdate={(prevValues, curValues) =>
                    prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
                  }
                >
                  {() => (
                    <Form.Item
                      {...field}
                      label="Sight"
                      name={[field.name, 'sight']}
                      rules={[
                        {
                          required: true,
                          message: 'Missing sight',
                        },
                      ]}
                    >
                      <Select
                        disabled={!form.getFieldValue('area')}
                        style={{
                          width: 130,
                        }}
                      >
                        {(sights[form.getFieldValue('area')] || []).map((item) => (
                          <Option key={item} value={item}>
                            {item}
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
                  )}
                </Form.Item>
                <Form.Item
                  {...field}
                  label="Price"
                  name={[field.name, 'price']}
                  rules={[
                    {
                      required: true,
                      message: 'Missing price',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>

                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}

            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add sights
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>

需求点： 如示例中： 想根据选择不同type，其他的Form.Item也不同，进行相应切换， 这里的price Form.Item可以换成其他的例如 size Form.Item, price FormItem则不需要；实现代码具体如下:

const typeList = ['A', 'B']
 <Form.Item
                {...field}
                  label="Tpye"
                  name={[field.name, 'type']}
                  rules={[
                    {
                      required: true,
                      message: 'Missing type',
                    },
                  ]}
                >
                  <Select
                        style={{
                          width: 130,
                        }}
                      >
                        {(typeList .map((item) => (
                          <Option key={item} value={item}>
                            {item}
                          </Option>
                        ))}
                      </Select>
 </Form.Item>
<Form.Item
           noStyle
           shouldUpdate={(prevValues, curValues) =>
               prevValues.sights[index] !== curValues.sights[index]
                  }
                >
                  {({getFieldValue}) => getFieldValue('sights')[index]&&getFieldValue('sights')[index].type
            &&getFieldValue('sights')[index].type === 'A'  ?  (
      <Space>
        <Form.Item
                      {...field}
                      label="Sight"
                      name={[field.name, 'sight']}
                      ]}
                    >
                      <Select
                        disabled={!form.getFieldValue('area')}
                        style={{
                          width: 130,
                        }}
                      >
                        {(sights[form.getFieldValue('area')] || []).map((item) => (
                          <Option key={item} value={item}>
                            {item}
                          </Option>
                        ))}
                      </Select>
                    </Form.Item>
            </Space> :
      <Form.Item label="Size" name="size">
        ........
      </Form.Item>
          )}
     </Form.Item>