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'],
};


        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              
                
                    prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
                  }
                >
                  {() => (
                    
                      
                        {(sights[form.getFieldValue('area')] || []).map((item) => (
                          
                            {item}
                          
                        ))}
                      
                    
                  )}
                
                
                  
                

                 remove(field.name)} />
              
            ))}

            
               add()} block icon={}>
                Add sights
              
            
          
        )}
      

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

const typeList = ['A', 'B']
 
                  
                        {(typeList .map((item) => (
                          
                            {item}
                          
                        ))}
                      
 

               prevValues.sights[index] !== curValues.sights[index]
                  }
                >
                  {({getFieldValue}) => getFieldValue('sights')[index]&&getFieldValue('sights')[index].type
            &&getFieldValue('sights')[index].type === 'A'  ?  (
      
        
                      
                        {(sights[form.getFieldValue('area')] || []).map((item) => (
                          
                            {item}
                          
                        ))}
                      
                    
             :
      
        ........
      
          )}