长春市网站建设_网站建设公司_Vue_seo优化
2025/12/18 15:55:51 网站建设 项目流程

可以,下面这段你直接复制给另外一个 AI,用它来帮你改代码就行(把“【在这里粘贴…】”那一段换成你的实际代码):


提示词:

你现在是一个资深前端工程师,熟悉 React 和 Ant Design。
我有一个三层结构的侧边菜单,需要实现“同一时刻只展开一个分支”的效果:

左侧是 Menu 组件,包含 一级 / 二级 / 三级菜单(多层 SubMenu + Menu.Item)。

需求是:

当我展开某一个子菜单(任意层级)时,其他不在同一父链上的子菜单要自动收起,类似“手风琴”效果。

当我点击某个叶子节点(Menu.Item)时,应该只保留该节点所在的那条父级路径展开,其他分支收起。

目前的实现不能做到这一点。下面是我现在的菜单相关代码(包括 Menu 渲染和 items / menuList 之类的数据结构,可能有 openKeys / selectedKeys 等):

// 在这里粘贴你当前的菜单相关代码,包括:
// 1. <Menu ... /> 的 JSX
// 2. 菜单 items/menuList 的定义
// 3. 任何 onOpenChange / onClick 等事件处理

请你根据上述需求,直接在我的代码基础上做修改,并给出一份完整可用的示例:

  1. 使用 Ant Design 的受控属性(如 openKeys、onOpenChange)实现“只展开一条分支”的逻辑。

  2. 如果需要,可以先构建一个 parentMap(子 key → 父 key)来计算某个 key 的父级链路,然后用它来控制 openKeys。

  3. 代码中请写清楚关键函数和状态(例如 buildParentMap、getPathToRoot、openKeys、selectedKeys 等)。

  4. 在回答中直接给出修改后的完整组件代码,不要只给片段,并在注释里简单说明思路。

请先简要说明你的实现思路,然后给出最终代码。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询