吐槽一下当前版本的 AntMenu,对强迫症很不友好!
多级菜单需要自己实现视觉聚焦,即同一层级只允许唯一展开。
而自己实现了之后会发现菜单在 Collapsed 的时候,你展开的那一级菜单会自动弹出 popover,而且位置还没有对齐(相关 issues),这也需要你自己来用很不优雅的方式来解决(先收起展开的子菜单,再折叠整个菜单,同时你要记录一下你收起的,为了再展开整个菜单的时候再展开之前收起的子菜单)。
但在折叠之后,如果点击 popover 中的菜单项,理论上在你重新展开整个菜单的时候,应当展开的子菜单是你 popover 时候点击的那个层级或者是关闭所有子菜单,而不能是你记录的那个了,这也得你自己实现。。(监听 onSelect,修改记录值)。
不过和路由地址的联动感觉怎么都得自己实现的才最能符合预期,这个功能没有提供就不吐槽了。(可以通过 PathToRegex 或 react router 4.x 中的 matchPath 来实现)。
顺便放出从 WithRouterProps.routes
中拿到当前匹配到的路由路径的方法:
1 | withRouterProps.routes |
不过也不要忽略了某些不在菜单中的页面,比如 /users/create
指向的是创建用户的页面,但是菜单中并没有,但是希望指向 /users
的那个菜单项被激活,这种时候可以简单地通过 includes 来匹配。