递归渲染子菜单不显示的根源是数据未转为树形结构，需先用map将扁平数组转为嵌套树；react中状态应提升至外层用set管理openkeys；vue需加v-if守卫防爆栈；原生js须避免innerhtml拼接导致事件丢失。
递归渲染时子菜单不显示？检查数据结构是否满足嵌套条件
无限级菜单的核心不是“怎么写递归”，而是“数据能不能递归”。常见错误是后端返回的是一维扁平数组（带 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 本身不递归，真正递归的是你写的 <menuitem></menuitem> 组件，如果它无条件地渲染 <menuitem v-for="child in item.children"></menuitem>，而某条数据的 children 字段是 undefined 或循环引用（A → B → A），就会爆栈。
- 务必在模板里加守卫：
v-if="item.children && item.children.length" - 服务端数据要校验，防止出现
children: [ { id: 1, children: [...] } ]这种隐式循环 - 开发期加深度限制：递归组件加
props: { depth: { type: Number, default: 0 } }，超过 6 层就停止渲染并打 warning
Tab 键跳转、Enter 触发、ArrowDown 移动焦点这些逻辑一旦缺失，不仅影响无障碍访问，在部分企业内审中直接算合规缺陷。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
