- **正确答案**：该问题要求实现一个“折叠抽屉”组件，支持无限层级展开、每次只能展开一个节点、子节点展开时其所有父节点都要被高亮。可以通过递归数据结构和状态管理来实现。 - **解答思路**： 1. 数据结构方面，使用树形结构（例如嵌套对象或数组）表示菜单项。 2. 每个节点需要保存 `id`、`label`、`children` 和是否展开的状态 `expanded`。 3. 高亮逻辑上，当某个子节点被展开时，要遍历它的所有祖先节点并标记为高亮。 4. 展开控制上，每次只允许一个节点处于展开状态，其他节点自动收起。 5. 前端渲染时，使用递归组件渲染树形结构，并绑定点击事件处理展开/收起和高亮逻辑。 - **深度知识讲解**： ### 核心知识点： 1. **树形结构的构建与遍历** - 使用嵌套 JSON 结构模拟菜单树 - 支持任意层级的递归展开 - 遍历方式包括深度优先（DFS）、广度优先（BFS） 2. **状态管理** - 每个节点维护自己的展开状态 `expanded` - 全局维护当前展开的节点 ID，用于判断是否需要收起其他节点 3. **高亮祖先节点逻辑** - 当某节点被展开时，需要向上回溯到根节点，将路径上的所有节点设置为高亮状态 - 这是一个典型的“找父节点链”的操作 4. **前端组件递归渲染** - React/Vue 中支持递归组件渲染树形结构 - 组件接收当前节点数据和层级参数，实现样式缩进等效果 5. **性能优化点** - 避免不必要的重渲染（React 中可使用 `useMemo` 或 `PureComponent`） - 大量节点时可考虑虚拟滚动技术（virtual scroll） ### 数据结构示例： ```js const menuTree = [ { id: '1', label: '一级菜单A', expanded: false, highlighted: false, children: [ { id: '1-1', label: '二级菜单A-1', expanded: false, highlighted: false, children: [ { id: '1-1-1', label: '三级菜单A-1-1', expanded: false, highlighted: false, children: [] } ] } ] }, { id: '2', label: '一级菜单B', expanded: false, highlighted: false, children: [] } ]; ``` ### 状态更新逻辑解析： - 每次点击一个节点： 1. 判断它是否是当前已展开的节点 2. 如果不是，则先将所有节点 `expanded` 设为 `false` 3. 设置当前节点 `expanded = true` 4. 找出它的所有祖先节点，并设为 `highlighted = true` 5. 自身也设为 `highlighted = true` - 查找祖先路径的函数可以这样写： ```js function findAncestors(tree, targetId) { let path = []; function dfs(node, currentPath) { if (node.id === targetId) { path = [...currentPath, node]; return true; } if (node.children && node.children.length > 0) { for (const child of node.children) { if (dfs(child, [...currentPath, node])) { return true; } } } return false; } for (const root of tree) { if (dfs(root, [])) break; } return path; } ``` - 设置所有节点未展开、仅当前节点展开： ```js function setExpandedOnly(tree, nodeId) { function traverse(nodes) { for (const node of nodes) { node.expanded = node.id === nodeId; if (node.children) traverse(node.children); } } traverse(tree); } ``` - 设置高亮状态： ```js function setHighlight(tree, nodeId) { const path = findAncestors(tree, nodeId); for (const node of path) { node.highlighted = true; } } ``` - **代码示例（React 实现核心逻辑）**： ```jsx import React, { useState } from 'react'; function MenuItem({ node, level, onExpand, expandedId }) { const isExpanded = node.id === expandedId; const hasChildren = node.children && node.children.length > 0; const handleClick = () => { if (hasChildren) { onExpand(node.id); } }; return (

{node.label}

{isExpanded && hasChildren && (

{node.children.map(child => ( ))}

)}

); } export default function DrawerMenu({ treeData }) { const [menuTree, setMenuTree] = useState(JSON.parse(JSON.stringify(treeData))); const [expandedId, setExpandedId] = useState(null); const handleExpand = (id) => { const newTree = JSON.parse(JSON.stringify(menuTree)); // 深拷贝原始数据 // 辅助函数：查找路径 const findPath = (nodes, targetId, path = []) => { for (const node of nodes) { if (node.id === targetId) { return [...path, node]; } if (node.children) { const result = findPath(node.children, targetId, [...path, node]); if (result) return result; } } return null; }; // 设置所有节点未展开 const resetExpanded = (nodes) => { for (const node of nodes) { node.expanded = node.id === id; if (node.children) resetExpanded(node.children); } }; // 设置高亮 const highlightPath = findPath(newTree, id); if (highlightPath) { highlightPath.forEach(n => n.highlighted = true); } resetExpanded(newTree); setMenuTree(newTree); setExpandedId(id); }; return (

{menuTree.map(node => ( ))}

); } ``` ### 应用场景与扩展思考： 1. **实际项目中的使用** - 抽屉菜单常用于后台管理系统、权限配置界面、目录导航等 - 可以结合图标、动画提升用户体验 2. **可扩展功能** - 支持多选展开（修改 `onExpand` 逻辑） - 添加搜索过滤功能（递归匹配 label 并高亮显示） - 支持拖拽排序（涉及 DOM 操作和状态同步） 3. **性能优化建议** - 对于非常深的树结构，可以采用懒加载（点击才请求子节点） - 使用虚拟列表技术（仅渲染可视区域内的节点） - 使用 memoization 减少重复计算（如路径查找） 4. **相关算法题** - LeetCode 638. Shopping Offers - LeetCode 559. Maximum Depth of N-ary Tree - LeetCode 103. Binary Zigzag Level Order Traversal （变种应用）这个组件背后涉及到的数据结构、状态管理和 UI 渲染逻辑在前端面试中是非常高频考点，尤其适合考察候选人对递归、状态管理、组件设计的理解能力。

字节抖音直播二面凉经

全站热榜

创作者周榜