在Ant Design中,可以使用Menu组件来创建带有子菜单的侧边菜单。以下是一个示例代码:
import React from 'react';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
class SideMenu extends React.Component {
render() {
return (
);
}
}
export default SideMenu;
在上述代码中,我们导入了Menu
和SubMenu
组件,并使用它们创建了一个侧边菜单。每个SubMenu
代表一个包含子菜单的菜单项。可以使用key
属性来为每个菜单项设置唯一标识,并使用defaultSelectedKeys
和defaultOpenKeys
属性来设置默认选中和默认展开的子菜单。
在子菜单项中,可以使用Menu.Item
来创建普通的菜单项,使用SubMenu
来创建包含子菜单的菜单项。你可以根据需要嵌套多个SubMenu
以及Menu.Item
来创建复杂的菜单结构。
最后,我们将SideMenu
组件导出,以便在其他组件中使用。你可以在需要的地方进行引入和使用。