mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
1.2 KiB
1.2 KiB
order | title | ||||
---|---|---|---|---|---|
12 |
|
zh-CN
使用 dropdownRender
对下拉菜单进行自由扩展。
en-US
Customize the dropdown menu via dropdownRender
.
import { Cascader, Divider } from 'antd';
import React from 'react';
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 dropdownRender = (menus: React.ReactNode) => (
<div>
{menus}
<Divider style={{ margin: 0 }} />
<div style={{ padding: 8 }}>The footer is not very short.</div>
</div>
);
const App: React.FC = () => (
<Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />
);
export default App;