> TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. > 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。你好！感谢你提出这个问题。根据你的描述，你想实现一个侧边栏切换的功能，当展开一个二级菜单时，默认选中一级菜单并且二级菜单自动闭合。以下是一个可能的解决方案：你可以使用 React 和 antd（Ant Design）库来实现这个功能。首先，你需要检查你的项目是否已经安装了相应的依赖包。你可以在命令行中使用以下命令来安装它们： ```bash npm install react antd ``` 接下来，你可以使用 antd 的 `Menu` 组件来创建侧边栏。在定义菜单项时，你可以使用 `SubMenu` 组件来创建二级菜单。为了实现自动闭合的效果，你可以使用 `openKeys` 属性来控制已打开的菜单项。在处理菜单项的点击事件时，你可以使用 `onOpenChange` 属性来更新 `openKeys` 的值。当用户点击二级菜单时，你可以将其父菜单的 `key` 添加到 `openKeys` 中。这样，在菜单渲染时，这些菜单项就会自动展开。下面是一个示例代码，演示了如何实现你的需求： ```jsx import React, { useState } from "react"; import { Menu } from "antd"; import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; const Sidebar = () => { const [openKeys, setOpenKeys] = useState([]); const handleClick = (e) => { const { keyPath } = e; // 将点击的菜单项的父菜单添加到 openKeys 中 setOpenKeys([keyPath[keyPath.length - 2]]); }; return ( Navigation One } > Option 1 Option 2 Option 3 Navigation Two } > Option 4 Option 5 Option 6 Navigation Three } > Option 7 Option 8 Option 9 ); }; export default Sidebar; ``` 在上述示例代码中，我们使用了 `Menu` 和 `SubMenu` 组件来创建侧边栏。`handleClick` 函数用于处理菜单项的点击事件，并更新 `openKeys` 的值。注意在菜单项中添加了 `onClick` 属性来绑定点击事件。你可以根据自己的需求和项目结构来调整菜单项的结构和样式。我们的解决方案主要依赖于 antd 提供的组件和 API，你可以查阅官方文档以了解更多信息： - Ant Design Menu 文档：https://ant.design/components/menu-cn/ - Ant Design SubMenu 文档：https://ant.design/components/menu-cn/#SubMenu 希望这个解决方案能对你有所帮助！如果你还有其他

展开侧边栏的时候，以前点击的二级菜单默认折叠起来，如何实现 #10806

Company

Community

Support

Connect