如何禁用Antd内联菜单（inline menu）中的指定菜单项？

Ant Design的MenuItem组件的disabled属性在内联（inline）类型菜单中的使用方式和其他菜单类型完全一致，不需要额外特殊处理。你只需要给目标菜单项添加disabled={true}属性即可。

静态菜单示例 #

以下是一个基础内联菜单示例，其中第二个菜单项被禁用：

import React from 'react';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const InlineMenuDemo = () => {
  return (
    <Menu mode="inline" defaultSelectedKeys={['1']}>
      <Menu.Item key="1" icon={<MailOutlined />}>
        收件箱
      </Menu.Item>
      {/* 给目标菜单项添加disabled属性 */}
      <Menu.Item key="2" icon={<AppstoreOutlined />} disabled>
        应用中心
      </Menu.Item>
      <Menu.Item key="3" icon={<SettingOutlined />}>
        设置
      </Menu.Item>
    </Menu>
  );
};

export default InlineMenuDemo;

动态菜单场景 #

如果你的菜单是通过数组动态渲染的，可以根据菜单项的属性条件性设置disabled：

const menuItems = [
  { key: '1', label: '收件箱', icon: <MailOutlined /> },
  { key: '2', label: '应用中心', icon: <AppstoreOutlined />, disabled: true },
  { key: '3', label: '设置', icon: <SettingOutlined /> },
];

// 动态渲染菜单
<Menu mode="inline" defaultSelectedKeys={['1']}>
  {menuItems.map(item => (
    <Menu.Item 
      key={item.key} 
      icon={item.icon} 
      disabled={item.disabled ?? false}
    >
      {item.label}
    </Menu.Item>
  ))}
</Menu>

无论静态还是动态场景，这种方式都能快速实现内联菜单中指定菜单项的禁用效果。

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