import React from 'react'; import type { CascaderProps } from 'antd'; import { Cascader } from 'antd'; interface Option { value: string; label: string; children?: Option[]; } const options: Option[] = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou', children: [ { value: 'xihu', label: 'West Lake', }, ], }, ], }, { value: 'jiangsu', label: 'Jiangsu', children: [ { value: 'nanjing', label: 'Nanjing', children: [ { value: 'zhonghuamen', label: 'Zhong Hua Men', }, ], }, ], }, ]; const onChange: CascaderProps<Option>['onChange'] = (value) => { console.log(value); }; // Just show the latest item. const displayRender = (labels: string[]) => labels[labels.length - 1]; const App: React.FC = () => ( <Cascader options={options} expandTrigger="hover" displayRender={displayRender} onChange={onChange} /> ); export default App;