HTML无限级菜单递归实现【避坑】

先说一个最常见的坑：使用递归组件渲染无限级菜单时，子菜单不显示，打开控制台发现数据层正确，模板也没有错误，问题通常出在数据结构上。无限级菜单的核心不是“怎么写递归”，而是“数据能不能递归”。很多后端返回一维扁平数组，带有 parentId 字段，前端直接传递给递归组件，结果只渲染第一层——因为递归函数默认期望接收的是已经按父子关系组织好的树形结构。如果不先处理数据结构，后续所有努力都是徒劳。

递归渲染时子菜单不显示？先检查数据结构是否满足嵌套条件

必须先完成扁平转树的操作。关键判断点：children 字段是否存在且为数组。如果接口返回类似 [{id:1, name:'首页'}, {id:2, name:'产品', parentId:1}] 的数据，那么不能跳过这一步。

• 使用 Map 缓存所有节点，再遍历一次挂载子项，时间复杂度为 O(n)，比双循环更稳定。
• 注意空字符串 parentId、null、0 的边界处理：有些后端用 0 表示根节点，有些用 null，需要统一转为 undefined 或 null 再判断。
• 避免在递归组件内部重复执行树化操作，否则每层都重算，会导致性能雪崩。

React 里用函数组件递归，点击展开没有反应？

典型症状：菜单能渲染，但 onClick 绑定后无响应，或者状态更新了但 DOM 没有重绘。根本原因是函数组件每次调用都是一次新实例，闭包捕获的 state 是旧值，在递归调用中很容易丢失引用。

解决方案不是禁用 React.memo，而是把状态提升到最外层，使用唯一 id 作为 key 来控制展开/收起：

const [openKeys, setOpenKeys] = useState(new Set());

• 不要用 useState(false) 存储单个菜单的开关状态——它会被子级覆盖。
• 使用 Set 管理所有展开项，toggle 时用 new Set(openKeys).toggle(id)，避免直接 mutate。
• 每个子菜单的 key 必须包含完整路径，例如 key={`menu-${id}-${parentId}`}，否则 React Diff 会复用错误的 DOM 节点。

原生 JS 实现递归菜单，addEventListener 总是被覆盖？

手写 innerHTML += 拼接 HTML 后绑定事件，结果只有最后一级菜单能响应点击——这是最经典的 DOM 事件绑定陷阱。字符串拼接会销毁已有节点，之前绑定的 addEventListener 全部失效。

• 必须用 document.createElement + appendChild 构建，或者用 template 标签预定义结构。
• 事件委托更可靠：给最外层容器添加 click 监听，用 event.target.matches('.menu-item-toggle') 判断触发源。
• 避免在递归函数里反复查询 DOM，例如 document.getElementById('menu-root')，应作为参数传入，减少作用域污染。

Vue 中 v-for 嵌套递归，控制台报错 “max stack size exceeded”？

这不是死循环，而是组件自身调用自身时没有设置终止条件。Vue 的 v-for 本身不递归，真正递归的是你写的 组件。如果它无条件地渲染 ，而某条数据的 children 字段是 undefined 或循环引用（A → B → A），就会导致栈溢出。

• 务必在模板里加守卫： v-if="item.children && item.children.length"。
• 服务端数据要校验，防止出现 children: [ { id: 1, children: [...] } ] 这种隐式循环。
• 开发期加深度限制：递归组件增加 props: { depth: { type: Number, default: 0 } }，超过 6 层就停止渲染并输出警告。

实际中最容易被忽略的是菜单项点击后的焦点管理与键盘导航支持——光有鼠标展开不够，Tab 键跳转、Enter 触发、ArrowDown 移动焦点等逻辑一旦缺失，不仅影响无障碍访问，在部分企业内审中直接算合规缺陷。