AntD v4中Dropdown.Button如何实现菜单选项的条件渲染？

在AntD从v3升级到v4后，Dropdown组件不再通过overlay属性传入Menu节点，而是改用menu.items接收对象数组定义菜单选项。要实现菜单选项的条件渲染，只需在生成items数组时加入逻辑判断即可，替代原v3中在Menu组件内的条件渲染写法。

修改后的代码示例 #

import "./index.css";
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Space } from "antd";

// 动态生成带条件渲染的菜单选项数组
const items = [
  // 条件满足时加入Option 1
  ...(true ? [{ label: "Option 1", key: "1" }] : []),
  // 条件不满足则跳过Option 2
  ...(false ? [{ label: "Option 2", key: "2" }] : []),
  // 固定显示的选项
  { label: "Submit and continue", key: "3" }
];

const App = () => {
  return (
    <Space direction="vertical">
      <Dropdown.Button
        icon={<DownOutlined />}
        menu={{ items }}
      >
        Submit
      </Dropdown.Button>
    </Space>
  );
};
export default App;

实现思路 #

• 利用数组展开语法...结合三元表达式，根据条件决定是否将对应选项对象加入items数组；
• 如果条件逻辑复杂，也可以用函数封装生成逻辑，通过if判断逐个添加选项；
• 最终将处理后的items数组传入Dropdown.Button的menu.items属性即可完成条件渲染。

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