.0.2结合antd5.0和ts和MicroApp实现的后台管理系统,如何在左侧导航栏折叠后再打开时,左侧的导航栏仍然停留在未折叠时的菜单项
时间: 2024-05-08 14:15:48 浏览: 14
您可以使用antd的Menu组件中的defaultSelectedKeys属性来记录当前选中的菜单项,然后在菜单折叠/展开时更新该属性的值。例如:
```tsx
import { Menu } from 'antd';
const { SubMenu } = Menu;
const MyMenu = () => {
const [collapsed, setCollapsed] = useState(false);
const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
const handleCollapse = () => {
setCollapsed(!collapsed);
};
const handleMenuClick = (e: any) => {
setSelectedKeys([e.key]);
};
return (
<Menu
defaultSelectedKeys={selectedKeys}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
onClick={handleMenuClick}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
<Menu.Item key="1">Tom</Menu.Item>
<Menu.Item key="2">Bill</Menu.Item>
<Menu.Item key="3">Alex</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
<Menu.Item key="4">Team 1</Menu.Item>
<Menu.Item key="5">Team 2</Menu.Item>
<Menu.Item key="6">Team 3</Menu.Item>
</SubMenu>
<Menu.Item key="7" icon={<FileOutlined />}>
Files
</Menu.Item>
<Menu.Item key="8" icon={<PieChartOutlined />}>
Reports
</Menu.Item>
<Menu.Item key="9" icon={<SettingOutlined />}>
Settings
</Menu.Item>
<Menu.Item key="10" icon={<LogoutOutlined />}>
Logout
</Menu.Item>
<div onClick={handleCollapse}>Toggle Collapse</div>
</Menu>
);
};
```
在上面的示例中,我们将selectedKeys属性设置为useState钩子的初始值,并在handleMenuClick函数中更新该属性的值。当菜单折叠/展开时,我们可以使用inlineCollapsed属性来判断当前菜单状态,并通过handleCollapse函数来更新该属性的值。这样,当您再次展开菜单时,选中的菜单项将保持不变。