Ant Design 的 Sider + Menu 实现数据库分组折叠，应使用树形数据结构配合 mode="inline" 和 inlineCollapsed，以 SubMenu 表示数据库、MenuItem 表示表，并确保 key 唯一稳定、defaultOpenKeys 与 SubMenu key 一致，通过 openKeys 受控管理展开状态，结合 useNavigate 实现路由跳转。
用 Ant Design 的 Sider + Menu 实现可折叠数据库分组
直接说结论：别手写折叠逻辑，ant design 的 menu 天然支持多级嵌套和 inlinecollapsed 控制收起，配合后端返回的树形结构就能跑通。关键不是“怎么画”，而是“怎么组织数据”和“怎么让 menu 识别分组边界”。
常见错误是把每个数据库当平铺 MenuItem，结果点不开、收不拢、选中态错乱。真正要做的，是把数据库名作为 SubMenu，其下表名作为子 MenuItem：
-
Menu的mode="inline"是前提，只有这个模式才支持折叠 - 后端返回的数据必须是树形（如
[{ key: 'db1', label: 'orders_db', children: [...] }]），不能是扁平列表 -
key字段必须唯一且稳定——别用中文或带空格的库名做key，推荐用小写+下划线（orders_db） - 如果数据库名含特殊字符（比如连字符、斜杠），
Menu.Item渲染会报Warning: React does not recognize the `key` prop，得提前清洗
为什么 defaultOpenKeys 不生效？
这是最常卡住的地方：你传了 defaultOpenKeys={['orders_db']}，但菜单就是不展开。根本原因通常是两个：
-
defaultOpenKeys只在组件首次挂载时生效，后续数据异步加载回来后它不会自动重算——得改用受控模式，配合openKeys+onOpenChange -
SubMenu的key和你传进defaultOpenKeys的值对不上。比如后端返回key: 'orders_db'，但你在SubMenu里写了key={'orders_db_v2'}，那就永远打不开
实操建议：在 useEffect 里监听数据库列表加载完成，然后调用 setOpenKeys([dbKey]) 主动设一次；或者直接用 openKeys={openKeys} 受控绑定，避免依赖默认行为。
Menu.Item 点击后如何跳转到对应数据库的表详情页？
不能只靠 onClick，得结合路由系统。假设你用 react-router@6，正确做法是用 useNavigate + MenuItem 的 key 做参数：
<Menu.Item key="orders_db.users">users</Menu.Item>
然后在 onClick 回调里解析 key：
- 拆出数据库名和表名：
const [db, table] = key.split('.') || [] - 跳转：
navigate(`/databases/${db}/tables/${table}`) - 别用
href或<Link>包裹MenuItem，会导致样式错位、选中态丢失 - 如果需要高亮当前数据库分组（不只是当前表），得自己维护
selectedKeys，因为Menu默认只高亮叶子节点
IE11 兼容或低性能设备上折叠卡顿怎么办？
Menu 在大量数据库（>50）+ 每个库下上百张表时，展开动画会明显掉帧。这不是 bug，是 React 渲染开销问题。
- 禁用动画：加
expandIcon={() => null}和motion={{}}（v5.12+ 支持）能立刻缓解 - 虚拟滚动不适用——
Menu不支持，得换方案，比如用rc-virtual-list自建树形列表，但开发成本高 - 更实际的做法是服务端分页：前端只请求“最近访问的 10 个库”，其余用搜索框按需拉取，而不是一次性全量渲染
- 注意：
inlineCollapsed为true时，SubMenu的文字会被截断，得加tooltip或改用图标标识数据库
最易被忽略的是 key 的稳定性——数据库重命名、同步延迟、大小写混用，都会让折叠状态错乱。上线前一定用真实环境跑一遍 rename 场景。
