React Antd Cascader 组件 「级联选择框」实战使用总结（一）

Cascader 级联选择框

何时使用

• 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
• 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
• 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

类型

interface Option {
  value: string;
  label: string;
  children?: Option[];
}
1
2
3
4
5

TypeScript 的一个问题

• 触发条件
  • props: CascaderProps<any>
  • 设置 multiple 复选

就会报错

• 报错
  

import { useMemo } from 'react';
import { Cascader, CascaderProps } from 'antd';
import { useModel } from 'umi';

interface Option {
  value: string | number;
  label: string;
  children?: Option[];
}

const CascaderSelect = (props: CascaderProps<any>) => {
 ...
 ...
 ...
  return (
    <Cascader
      placeholder="请选择"
      options={options || []}
      multiple
      allowClear
      {...props}
    />
  );
};
export default XXXCascaderSelect;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

猜测

看源码
SingleCascaderProps.ts

export { BaseOptionType, DefaultOptionType };
export declare type FieldNamesType = FieldNames;
export declare type FilledFieldNamesType = Required<FieldNamesType>;
declare const SHOW_CHILD: "SHOW_CHILD", SHOW_PARENT: "SHOW_PARENT";
declare type SingleCascaderProps = Omit<RcSingleCascaderProps, 'checkable' | 'options'> & {
    multiple?: false;
};
declare type MultipleCascaderProps = Omit<RcMultipleCascaderProps, 'checkable' | 'options'> & {
    multiple: true;
};
declare type UnionCascaderProps = SingleCascaderProps | MultipleCascaderProps;
export declare type CascaderProps<DataNodeType> = UnionCascaderProps & {
    multiple?: boolean;
    size?: SizeType;
    disabled?: boolean;
    bordered?: boolean;
    placement?: SelectCommonPlacement;
    suffixIcon?: React.ReactNode;
    options?: DataNodeType[];
    status?: InputStatus;
    /**
     * @deprecated `dropdownClassName` is deprecated which will be removed in next major
     *   version.Please use `popupClassName` instead.
     */
    dropdownClassName?: string;
};
export interface CascaderRef {
    focus: () => void;
    blur: () => void;
}
declare const Cascader: (<OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<CascaderProps<OptionType>> & {
    ref?: React.Ref<CascaderRef> | undefined;
}) => React.ReactElement) & {
    displayName: string;
    SHOW_PARENT: typeof SHOW_PARENT;
    SHOW_CHILD: typeof SHOW_CHILD;
};
export default Cascader;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

MultipleCascaderProp.ts

onChange 类型应该是复选但是传单选

其他

• Antd 级联框的数据源字段命名必须用他给的
  

严格符合这个 typescript 接口格式

建议写一个函数专门处理后端接口返回的数据结构转换成下面的样式

由于数据结构带有 children 用递归很好

interface Option {
  value: string | number;
  label: string;
  children?: Option[];
}
1
2
3
4
5

例子：

const flatToTree = (data?: any[]): any => {
    const formattedDepartment = data?.map(
      ({ name, id, children }) => ({
        label: name,
        value: id,
        children: flatToTree(children),
      }),
    );
    return formattedDepartment;
  }
1
2
3
4
5
6
7
8
9
10

• 如果你的级联选择默认总是有一个被选中的显示 刷新后还是有一个 就像给了一个默认值一样但你却没给默认值
  解决： 去掉 …props 入参即可
  {…props} ×
  

欢迎批评指正 分享你使用 antd 等组件踩的坑

吐槽今天还遇到的一个坑，后端接口文字段名给错了 文档给的字段名和实际浏览器抓包给的不一样 应该是基于 yapi 做的自用的