如何使用Ant Design创建带有不同选项的多个下拉菜单？

你之前的误区在于误以为Dropdown的menu属性只能接受名为items的变量，但实际上menu={{ items }}是ES6的对象简写语法，等价于menu={{ items: items }}——这里的items是对象的属性名，不是固定的变量名。你完全可以创建多个不同的选项数组，只要把它们赋值给menu对象的items属性即可。

具体实现示例 #

先定义多个符合MenuProps['items']类型的选项数组：

import { Dropdown, Button, MenuProps } from 'antd';

// 分类下拉菜单的选项
const categoryOptions: MenuProps['items'] = [
  { label: 'A', key: '1' },
  { label: 'B', key: '2' },
  { label: 'C', key: '3' },
];

// 操作下拉菜单的选项
const actionOptions: MenuProps['items'] = [
  { label: '编辑', key: 'edit' },
  { label: '删除', key: 'delete' },
  { label: '分享', key: 'share' },
];

接着在页面中渲染多个Dropdown组件，分别传入对应的数组：

export default function MultipleDropdownDemo() {
  return (
    <div style={{ display: 'flex', gap: '16px', padding: '20px' }}>
      <Dropdown menu={{ items: categoryOptions }} placement="bottom">
        <Button>分类</Button>
      </Dropdown>

      <Dropdown menu={{ items: actionOptions }} placement="bottom">
        <Button>操作</Button>
      </Dropdown>
    </div>
  );
}

额外技巧：内联定义选项 #

如果选项逻辑简单，也可以直接在Dropdown组件内联定义选项数组，不用单独声明变量：

<Dropdown 
  menu={{
    items: [
      { label: '导出', key: 'export' },
      { label: '打印', key: 'print' }
    ]
  }}
>
  <Button>更多</Button>
</Dropdown>

核心逻辑就是：只要你的数组符合MenuProps['items']的类型规范（包含label、key等必填字段），不管变量名是什么，都可以通过menu={{ items: 你的数组 }}传递给Dropdown组件。

内容的提问来源于stack exchange，提问作者BRSwift