可以,下面这段你直接复制给另外一个 AI,用它来帮你改代码就行(把“【在这里粘贴…】”那一段换成你的实际代码):
提示词:
你现在是一个资深前端工程师,熟悉 React 和 Ant Design。
我有一个三层结构的侧边菜单,需要实现“同一时刻只展开一个分支”的效果:
左侧是 Menu 组件,包含 一级 / 二级 / 三级菜单(多层 SubMenu + Menu.Item)。
需求是:
当我展开某一个子菜单(任意层级)时,其他不在同一父链上的子菜单要自动收起,类似“手风琴”效果。
当我点击某个叶子节点(Menu.Item)时,应该只保留该节点所在的那条父级路径展开,其他分支收起。
目前的实现不能做到这一点。下面是我现在的菜单相关代码(包括 Menu 渲染和 items / menuList 之类的数据结构,可能有 openKeys / selectedKeys 等):
// 在这里粘贴你当前的菜单相关代码,包括:
// 1. <Menu ... /> 的 JSX
// 2. 菜单 items/menuList 的定义
// 3. 任何 onOpenChange / onClick 等事件处理
请你根据上述需求,直接在我的代码基础上做修改,并给出一份完整可用的示例:
-
使用 Ant Design 的受控属性(如 openKeys、onOpenChange)实现“只展开一条分支”的逻辑。
-
如果需要,可以先构建一个 parentMap(子 key → 父 key)来计算某个 key 的父级链路,然后用它来控制 openKeys。
-
代码中请写清楚关键函数和状态(例如 buildParentMap、getPathToRoot、openKeys、selectedKeys 等)。
-
在回答中直接给出修改后的完整组件代码,不要只给片段,并在注释里简单说明思路。
请先简要说明你的实现思路,然后给出最终代码。