antd 实现三级联动

Ant Design（蚂蚁金服UI库）提供了一个 Cascader（级联选择器）组件，可以很方便地实现三级联动效果。

首先，需要准备好三级数据源，比如：

const options = [
  {
    label: '省份',
    value: 'province',
    children: [
      {
        label: '广东省',
        value: 'guangdong',
        children: [
          {
            label: '深圳市',
            value: 'shenzhen',
          },
          {
            label: '广州市',
            value: 'guangzhou',
          },
        ],
      },
      {
        label: '湖南省',
        value: 'hunan',
        children: [
          {
            label: '长沙市',
            value: 'changsha',
          },
          {
            label: '株洲市',
            value: 'zhuzhou',
          },
        ],
      },
    ],
  },
];

然后在组件中使用 Cascader 组件，并将 options 数据源传递给它：

import { Cascader } from 'antd';

function onChange(value, selectedOptions) {
  console.log(value, selectedOptions);
}

function CascaderDemo() {
  return (
    <Cascader options={options} onChange={onChange} placeholder="请选择" />
  );
}

export default CascaderDemo;

这样，就可以实现三级联动了。当用户选择某个选项时，onChange 回调函数会被触发，可以通过回调函数获取当前选中的值和选项。可以根据选中的值，通过查询接口等方式加载下一级选项，从而实现动态联动效果。