feat: retire deprecated api #745
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
tests/SubMenu.spec.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
概述演练这组更改主要重构了菜单组件的实现方式，从使用嵌套的 JSX 组件转变为使用 变更
诗歌
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
tests/Focus.spec.tsx (1)
7-7: TODO 提示：建议后续采用userEvent进行更真实的交互测试。
此标注表明未来可能的改进方向。tests/Collapsed.spec.tsx (1)
70-91: 多级菜单测试覆盖建议
同样使用items来定义嵌套子菜单，测试不同模式切换时子菜单的隐藏/展开逻辑。可进一步补充异常场景测试。src/Menu.tsx (1)
247-250: 分离渲染与测量时的子项解析
同时调用parseItems生成childList与measureChildList，可实现独立测量与渲染。若用途仅在测试或动画测量，建议在单独逻辑层封装，便于后续维护。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
tests/__snapshots__/Menu.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/MenuItem.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/Responsive.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (13)
src/Menu.tsx(1 hunks)src/MenuItem.tsx(0 hunks)src/interface.ts(3 hunks)src/utils/nodeUtil.tsx(1 hunks)tests/Collapsed.spec.tsx(8 hunks)tests/Focus.spec.tsx(8 hunks)tests/Keyboard.spec.tsx(10 hunks)tests/Menu.spec.tsx(30 hunks)tests/MenuItem.spec.tsx(7 hunks)tests/Private.spec.tsx(3 hunks)tests/React18.spec.tsx(2 hunks)tests/Responsive.spec.tsx(3 hunks)tests/SubMenu.spec.tsx(16 hunks)
💤 Files with no reviewable changes (1)
- src/MenuItem.tsx
🔇 Additional comments (105)
tests/Menu.spec.tsx (36)
3-3: 导入新测试库的act方法非常好
此改动有助于在测试时保证状态更新的准确性，避免出现异步导致的断言失败。
8-8: 从../src导入Menu
此改动与移除子组件、改用items属性的重构思路一致，可以保持接口的简洁性。
51-101: 使用items属性生成分组与菜单项
将组件式的写法迁移到基于数据的写法提高了菜单的灵活性和可维护性。注意各个key值需要保持唯一，避免重复。
141-150: 空子组件测试
这里测试了在items为空或未指定时不会产生错误，符合防御式编程的思路。无问题。
165-198: 支持 Fragment 的测试
在items中对多层级与 Fragment 进行兼容，能进一步增强可扩展性。实现良好。
207-227: 测试role="listbox"
为菜单设置不同的 role，可提高可访问性（ARIA）。此处实现合理，测试覆盖充分。
239-252: 使用activeKey受控
此测试验证了外部通过activeKey精准控制聚焦项的逻辑，功能完整。
266-278: 测试默认激活第一项
通过defaultActiveFirst实现首项激活的功能，案例清晰，符合预期。
287-299: 多选场景测试
multiple模式下可以同时选中多项，测试交互流程正确。
360-373: 受控选中项测试
验证了通过传入selectedKeys来控制选中状态的特性，使用场景合乎逻辑。
385-393: 空或 null 的selectedKeys
此场景能避免组件在极端状况下抛错，覆盖面较完整。
401-411: 不可选状态下的点击事件
当设置selectable: false时，不会触发 onSelect。该测试能有效预防异常操作。
430-442: 默认选中测试
defaultSelectedKeys能帮助在初始渲染时自动选中指定菜单项，流程无误。
451-463: 兼容旧式字符串selectedKeys
对历史遗留 API 进行兼容性支持，确保不会意外破坏现有功能。做法良好。
474-501: 受控展示子菜单测试
通過修改openKeys，可以灵活控制子菜单的展开，逻辑完善。
529-546: 允许openKeys为空
这种设计使菜单对可选属性处理更宽容，能应对各种动态场景。
553-569:openKeys为 null
和上一段类似，该用例保证当openKeys=null时不会语法或逻辑崩溃。
577-603: 默认展开子菜单
defaultOpenKeys的测试体现了初始状态下的展开逻辑，覆盖准确。
621-633: 选择事件触发
模拟点击后验证 onSelect 的回调参数：可以准确获取所选键值。
646-670: 点击事件处理
此测试中模拟点击菜单并检查 deprecated 字段的告警，流程无冲突。
696-709: 触发取消选择
用例检验了onDeselect方法在多选时的工作正常，覆盖完善。
719-735: 鼠标移入激活
使用fireEvent.mouseEnter验证菜单项激活状态，符合用户交互预期。
743-756: 键盘导航激活
测试了按键操作可激活对应菜单项，提供更好的可访问性支持。
774-783: 测试defaultActiveFirst
在有选中项的情况下优先激活第一项，令交互行为更灵活。
801-820: 自定义builtinPlacements
可为子菜单弹出层提供更灵活的定位方案，该测试验证了该功能。
837-853:defaultMotions多模式动画测试
为不同模式（inline、horizontal 等）定义不同动效，使 UI 更顺畅。
882-894: 顶层单独设置motion
在 test 中优先使用motion，再回退到defaultMotions，测试保证了优先级正确。
913-928:inline不影响vertical的动画
通过逐步重渲染测试，确认不混淆两种模式下的 motion 配置。
942-955: onMouseEnter 回调
测试鼠标进入菜单时能正确触发onMouseEnter，用于实现诸如高亮或提示等功能。
964-980: 嵌套子项激活
验证激活时上层子菜单的活跃状态同步，模拟真实交互。
990-997: 销毁菜单时不产生警告
确保组件卸载后无多余日志输出，避免污染调试信息。
1020-1033: 点击菜单项后收起子菜单
在非 inline 模式下点击子项自动闭合菜单，测试交互符合预期。
1055-1072: inline 模式下不自动收起
验证了当模式为inline时，子菜单不会在点击选项后自动关闭。
1088-1096: Ref 传递测试
确认了使用ref能正确抓取listDOM 节点并调用focus。
1107-1123: Divider 的元素角色
divider设置role="separator"提升可访问性并符合语义。
1140-1179: 自定义或隐藏展开图标
同一个菜单支持expandIcon属性自定义图标或设为null、false隐藏图标，可视化选项更灵活。tests/Private.spec.tsx (3)
5-5: 改用统一导入Menu
不再显式导入MenuItem或SubMenu，与主文件的重构策略吻合。
16-22:_internalRenderMenuItem自定义注入类名
通过_internalRenderMenuItem钩子为 MenuItem 增加额外的类名，有效地实现了定制化。
38-51:_internalRenderSubMenuItem测试
类似地为子菜单注入自定义类名，验证了重构后的items数组在子菜单场景同样适用。tests/React18.spec.tsx (2)
5-5: 沿用Menu新结构
保持与 React 18 相关测试同步，确保items性能正常。
27-64: 定义items结构用于子菜单延迟测试
此测试场景包括深层子菜单，验证在 React 18 严格模式下仍保持预期行为。src/utils/nodeUtil.tsx (1)
72-72: 移除对children参数的依赖
改用items减少冗余，多余引用已被删除，逻辑更简洁易维护。src/interface.ts (3)
56-59: 为MenuItemType新增title与role
通过增加可选的title和role属性，可为菜单项提供更灵活的可访问性和提示信息。
69-70:MenuItemGroupType支持可选key
让分组可以自定义 key，避免在动态生成时与其他项目冲突。
148-150: 组件类型定义更便于扩展
在Components中使用Partial<Record<ComponentType, React.ComponentType<any>>>表达方式，提高了对自定义组件的兼容性。tests/Responsive.spec.tsx (3)
7-7: 导入优化完成，已移除不再使用的子组件。
此变更符合新的 API 结构，避免冗余引用。
87-105: 通过items属性渲染菜单在测试中更具可读性。
这段使用items数组来生成子菜单，逻辑清晰且便于维护。
120-141: 在测试中添加onOpenChange以追踪菜单折叠状态很有用。
此段代码中使用了items并配合onOpenChange，有助于增强测试的完整性。tests/MenuItem.spec.tsx (10)
5-5: 简化导入语句，减少冗余。
不再显式导入 MenuItem，符合新的 API 使用习惯。
30-40: 使用items配合itemIcon等属性测试自定义图标。
代码可读性良好，测试覆盖了渲染结果的准确性。
49-64: 可选子级itemIcon属性验证方式正确。
此处在同一组件层面测试定制图标的渲染逻辑，能确保灵活性。
74-83: 阻止禁用项的选择事件以符合常见需求。
测试验证清晰，进一步保障了禁用状态的正确行为。
93-102: 统一将事件处理封装到items中。
整合初始化与事件注册简洁明了，易用性高。
153-188: 分发restProps合理，以确保透传事件与属性。
此处测试可有效防止事件被多次触发，代码组织良好。
207-215: 允许通过role自定义 WAI-ARIA 属性，且支持null值。
保证了在必要时可以移除默认角色，增强可访问性。
223-231:role="none"的测试确保可自定义角色语义。
确认none用法正常，为各种场景留足扩展空间。
239-247: 将角色设为listitem，明确列表场景下的语义需求。
对于辅助功能十分有价值。
255-263: 支持role="option"，便于组合各种可访问控件。
测试覆盖是完整的，能确保生成的元素正确拥有相应角色。tests/Focus.spec.tsx (8)
5-5: 只保留MenuRef的导入可使类型更聚焦。
已移除无用的子组件导入，看起来更干净。
33-49: 聚焦测试验证rc-menu-item-active的逻辑准确。
整体实现符合预期，代码可读性良好。
68-90: 通过ref聚焦到指定项，测试用户体验更贴近实际需求。
在可访问性层面，此特性提供了友好的交互方案。
105-120: 激活指定activeKey的菜单项后测试聚焦效果。
用例可有效验证在菜单初始化时进行定位的正确性。
134-161: 若首项为空组，则聚焦转向下一个可用选项，逻辑处理合理。
特例验证到位，可防止出现空组导致无法聚焦的情况。
176-202: 若首项为非空组，焦点可顺利定位至该组中的第一个可用元素。
同样是特例用例，确保嵌套级别正确对焦。
Line range hint
217-303: 多层嵌套组与子项测试覆盖了更复杂的焦点移动场景。
用例深入验证各层级导航正确性，处理完善。
270-303: 聚焦带有子菜单的展开逻辑，确保交互顺畅。
此处验证在嵌套场合的焦点移动，不会出现混乱或失焦。tests/Keyboard.spec.tsx (11)
2-2: 将act改为从@testing-library/react导入可与测试库保持一致。
符合社区推荐做法，减少冲突。
6-6: 精简导入内容，改为仅使用Menu。
新的结构整合了资源使用，简化了依赖关系。
49-64: 测试初始化时无data-menu-id，确认渲染快照稳定。
在特定场景下无需额外 DOM 属性，有助降低复杂度。
78-83: 动态更新items并测试键盘导航，场景真实。
可保证在菜单项目变化时键盘焦点逻辑依旧健全。
109-136: 跳过禁用项的键盘导航，测试用例能防止意外聚焦。
此处逻辑清晰，能确保用户体验的一致性。
159-173: 回车键展开子菜单并激活首子项，交互顺畅。
用例可及时发现子菜单无法正确展开的潜在问题。
195-218: 含多级子菜单的测试能验证键盘上下级切换。
为LTR与RTL分别测试，兼容性良好。
268-287: 验证inline模式下的键盘行为，并确认按键触发展开逻辑。
覆盖度较高，能捕捉隐藏的控制键问题。
320-332: 上键聚焦最后一个可交互元素，行为与多数 UI 约定一致。
良好的用户体验，满足多样化导航需求。
341-349: 聚焦到含超链接的项，测试了 Link 的自动聚焦。
能有效保证在可访问性场景下的正确处理。
360-369: 通过多次键盘操作确保不会死循环，逻辑稳定。
此测试防止极端场景下菜单无法跳出。tests/Collapsed.spec.tsx (7)
4-4: 导入方式更简洁
此处仅导入了Menu组件，已去除对SubMenu和MenuItem的显式引用，配合新items属性结构更统一。
18-41: 使用items属性替换传统嵌套方式
这里为Menu设置了items数组并含有多级children，提升了配置的可读性与维护性。
138-162: 验证初始展开与折叠逻辑
针对defaultOpenKeys与inlineCollapsed的交互过程做了完备测试，可有效避免不一致行为。
207-231: 测试默认不存在的 openKeys
初始状态指定无效的openKeys，确保渲染时不会出现异常展开。该用例对边界情况有参考价值。
286-317: inlineCollapsed 下 Tooltip 测试
对title不同取值时，是否显示 Tooltip 做了覆盖，可避免标题异常。
337-357: 切换选中时自动关闭其他展开项
多重菜单交互逻辑在未开启multiple时，点击后自动折叠其他子菜单，测试符合预期。
397-417: 初始折叠态时 openKeys 检验
确保初始inlineCollapsed状态与后续展开动作保持一致，不会出现意外的显示问题。tests/SubMenu.spec.tsx (21)
5-5: 移除对SubMenu/MenuItem的直接导入
仅保留对Menu的引用，契合新版items结构，简化了组件之间的依赖关系。
51-88: 以items数据结构进行多级子菜单定义
替换以前的 JSX 嵌套方式，提升可读性并方便后续扩展或修改子项配置。
98-114: 禁用子菜单的悬浮展开测试
在disabled为true时验证鼠标悬停不弹出子菜单，确保行为符合预期。
123-140: 可自定义子菜单弹层偏移量
通过popupOffset: [0, 15]测试子菜单弹层位置的灵活度，对特定布局时较实用。
153-170: 可替换子菜单箭头图标的渲染测试
确保自定义expandIcon时仍能正常显示父级菜单的文案与图标元素。
178-195: 函数形式的expandIcon测试
在expandIcon传入函数时，动态渲染菜单箭头图标的逻辑保持一致。
211-229: 水平模式下不渲染自定义箭头图标
验证当mode="horizontal"时，子菜单箭头图标不会出现，避免视觉冲突。
266-280: 鼠标事件展开/收起子菜单
验证在默认 “悬浮触发” 场景下，移入时展开、移出后收起逻辑正常。
320-350: onOpenChange 回调测试
悬浮进入多级菜单时逐步更新openKeys，对应地触发onOpenChange回调，可追踪所有打开状态变化。
356-356: 首次鼠标移入设置 openKeys=['s1']
校验回调参数确保正确打开第一层子菜单。
363-363: 再次移入嵌套子菜单将 openKeys 扩展为 ['s1','s2']
验证嵌套场景下键列表能逐级更新。
374-382: 带有 undefined key 的菜单项警告
调用时会抛出警告信息，符合对数据完整性的约束。
399-407: 带有 undefined key 的 SubMenu 同样警告
进一步验证子菜单若缺少 key，会给出相同提示，避免渲染异常。
424-430: divider 类型未产生警告
测试分隔线类型的菜单项无需 key，符合组件属性预期。
465-482: 在子菜单上触发 mouseEnter/mouseLeave 回调
当指定onMouseEnter/onMouseLeave时，正确捕获鼠标事件，便于外部逻辑拓展。
533-549: 组件级 style 测试
确认Menu顶层style属性可正确应用，如背景色等自定义样式。
558-569: 样式仅赋予菜单项本身，不向子层透传
验证style不会在子组件层级产生冲突，可按需独立设置。
581-609: inline 模式下点击展开子菜单
若子菜单被disabled时无效，否则正常触发onOpenChange，测试用例覆盖到基本交互需求。
623-640: 水平模式下的弹层样式测试
popup的 className 与菜单模式需保持一致，可避免样式错位。
656-683: rootClassName 与子菜单弹层冲突校验
用于统一风格，断言在主菜单和子菜单弹层均可注入定制类名，满足多场景需求。
710-725: 子菜单层支持自定义弹层样式
测试popupStyle确保可控制zIndex、宽度等 CSS，使用者可灵活定制布局。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (14)
docs/examples/openKeys.tsx (1)
31-67: 使用itemsProp 建立层级结构更直观
通过items数组定义结构化菜单项，避免了嵌套 JSX 实现，令代码更易读、更易维护。需注意：
type: 'submenu'与其子级的配合能更充分地体现层级关系；- 如需额外处理（例如自定义图标或交互），可考虑在子项中添加相应属性，保持兼容和可扩展性；
- 建议考虑在单测和文档中展示更多嵌套场景，以确保在多层子菜单时也能如预期运行。
docs/examples/rtl-antd.tsx (4)
51-121: 数据驱动的菜单配置值得肯定，但请考虑提高可读性。
目前嵌套层级很多，后续若业务复杂度提升，阅读和维护会变得较为困难。建议在可能的情况下，将不同层级拆分到专门的常量或配置文件中，以提升可读性与可维护性。
128-160: 与子菜单保持一致的结构化写法，建议统一命名和注释。
children1同样采用对象数组定义，结构上比较清晰。若在大型项目中使用，可考虑对菜单项关键字段（如label、type、children等）增加注释或 TS 类型定义，进一步明确作用与类型。
164-186: 与上方children1相同的配置方式，避免冗余。
children2与children1的结构几乎一致，仅改变了个别节点。为减少重复代码，可以考虑将公共部分抽取或基于传参生成，避免后续修改时多处同步维护。
192-193: 接口仍使用React.ReactNode，可考虑升级为更严格的类型。
当前CommonMenuState使用了ReactNode来表示children。鉴于此处已采用对象式菜单配置，不再依赖大量 JSX；可以考虑改成更准确的类型定义（如MenuProps['items']），以增强类型校验的严谨度。docs/examples/scrollable.tsx (1)
8-8: 初始化items数组的方式默认清晰有效。
如果后续需要在复杂场景中动态生成，可以考虑使用.map()等函数更具可读性。docs/examples/menuItemGroup.tsx (2)
11-14: 在生产环境中谨慎使用console.log。
虽然在示例中使用console.log('click')便于调试，但是在实际生产环境中更建议使用专业日志收集方案，或者移除多余的调试信息。
15-45: 使用items属性定义分组菜单项结构清晰，可读性强。
type: 'group'、label与children的配置方式更加简洁，易于维护。可在稍后根据需要，将重复的分组及内容抽离封装，进一步保持代码一致性。docs/examples/selectedKeys.tsx (1)
89-125: 基于items属性的声明式写法有助于简化菜单结构。
现使用items取代原有的SubMenu和MenuItemJSX 结构，能更好地匹配新版rc-menu废弃旧 API 的方案。不过需要注意：
type: 'submenu'字符串可考虑提取到常量或枚举，减少魔法字符串带来的拼写风险。- 请确保其他业务代码也同步迁移到
items属性，以避免混用造成不一致。docs/examples/multiple.tsx (2)
30-45: 使用items结构来替代原先的 SubMenu/Item JSX 方式，改善了可维护性。
通过将子菜单树重构到items属性，可让数据结构更清晰，也简化了嵌套逻辑。建议补充相应文档说明，让使用者了解该配置式声明方式。
46-94: 注重可读性与动态渲染可能性。
此处包含多层嵌套的子菜单，如 “4-2-2” 等，较深的层级或许可以考虑做进一步拆分或通过配置表驱动，避免嵌套过深造成可读性难度。docs/examples/keyPath.tsx (2)
19-63: 建议将嵌套菜单项抽离到单独变量。当前
children层级较深，若在更多场景下需要增减项目，代码维护成本会较高。可以考虑将items的结构提取为一个独立常量或函数，令 JSX 更专注于渲染逻辑，增强可读性。例如：- items={[ - { - key: '1', - ... - }, - ... - ]} + items={getMenuItems()}
64-68: 单个菜单项保持一致风格以免混淆。与前面定义 submenu 的方式一致，可以考虑统一菜单项属性或命名风格（例如都指定
type）。目前不会影响功能，但能让结构更加统一。docs/examples/debug.tsx (1)
72-72: 在此示例中，给 Menu 绑定 ref 并通过按钮触发 focus，演示个性化交互非常直观。
后续可进一步丰富调试场景，比如测试键盘操作的可访问性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
docs/demo/fragment.md(0 hunks)docs/examples/antd.tsx(5 hunks)docs/examples/custom-icon.tsx(2 hunks)docs/examples/debug.tsx(3 hunks)docs/examples/fragment.tsx(0 hunks)docs/examples/items-ref.tsx(1 hunks)docs/examples/items.tsx(1 hunks)docs/examples/keyPath.tsx(2 hunks)docs/examples/menuItemGroup.tsx(1 hunks)docs/examples/multiple.tsx(2 hunks)docs/examples/openKeys.tsx(2 hunks)docs/examples/rtl-antd.tsx(3 hunks)docs/examples/scrollable.tsx(2 hunks)docs/examples/selectedKeys.tsx(2 hunks)
💤 Files with no reviewable changes (2)
- docs/demo/fragment.md
- docs/examples/fragment.tsx
🔇 Additional comments (31)
docs/examples/openKeys.tsx (1)
4-4: 移除子组件引用后保持 import 简洁，符合最新用法
该行仅导入Menu，去掉了对SubMenu和Item的显式引用。本次改动有效降低了对不再使用组件的依赖，符合当前代码重构的方向。docs/examples/rtl-antd.tsx (1)
5-5: 引入方式简洁明了，保持现状即可。
在此处仅保留Menu和MenuProps的引入，契合新的数据驱动写法。这个改动没有问题。docs/examples/scrollable.tsx (3)
4-4: 导入rc-menu看起来很规范和简洁。
此变更与移除旧的 children 方式对应，代表项目开始采用新版的Menu组件 API。
10-13: 使用循环推入 label/key 属性时务必保证 key 唯一性。
目前以i为值生成 key 整体没问题，但需确保不会和其他组件或场景产生冲突。
25-25: 新版Menu组件通过items渲染更符合简化和可扩展设计。
此处很好地展示了弃用旧children方式后如何使用统一 API，并保持代码整洁。docs/examples/menuItemGroup.tsx (2)
4-4: 导入 rc-menu 库看起来很合理。
这行代码与本次迁移到items属性的变更相一致，暂无明显问题。
46-46: 组件闭合标签正确。
这里的结构符合 React JSX 语法规范，暂未发现问题。docs/examples/selectedKeys.tsx (2)
4-4: 更精简的导入方式已与新版 API 保持一致。
引入方式更为简洁，无需额外导入SubMenu或MenuItem，与废弃的旧 API 相互对应。请注意确认是否对其他组件的使用造成影响。
9-12: 调整后的接口声明风格更统一。
TestState中各字段对齐，代码可读性更佳。此处仅为格式变化，无功能性差异，可放心合并。docs/examples/multiple.tsx (2)
4-4: 将rc-menu的导入替换为Menu组件的方式非常清晰。
这行 import 声明符合预期，也与下文的使用方式保持一致。
95-105: 整体默认选中、禁用等功能在示例中得到了充分演示。
这里的禁用菜单项与其他正常项目混排，演示了多样状态。相关交互在示例里表现良好，建议后续结合测试用例确保所有交互都正常工作。docs/examples/keyPath.tsx (2)
4-4: 导入rc-menu模块的步骤看起来无问题。此处仅导入
rc-menu，非常简洁且符合项目需求，无额外问题。
15-18: 在 Menu 组件中使用items属性是一种更具可读性和可维护性的方式。通过将菜单结构以对象数组的形式传给
items，有效地避免了过度嵌套的 JSX，提高了代码清晰度。docs/examples/custom-icon.tsx (4)
3-3: 将 Menu 改为从 rc-menu 引入是合理的改动。
有利于与其他文件保持一致性，且便于维护。
5-5: 引入 ItemType 接口可增强类型安全性。
推荐在后续代码中充分使用该类型，以确保菜单结构的可维护性。
71-142: 使用对象配置渲染多层子菜单的思路清晰，但需仔细验证深层嵌套的可用性。
建议在交互测试中关注菜单的可折叠性及滚动表现，防止过深菜单层级导致视觉或体验问题。
144-190: 基于 items 数组的通用菜单渲染方式易于扩展和维护。
在使用...props时，请确保不与现有 props（如items,onClick等）产生冲突。docs/examples/antd.tsx (9)
5-5: 改为从 rc-menu 引入符合整体迁移策略。
在多个示例文件中统一使用 rc-menu，可避免重复维护。
6-6: 新增对 ItemType 的导入有助于强化类型定义。
便于后续在菜单结构中充分利用类型提示。
53-123: 通过 nestSubMenu 对象显式描述层级显著提升可读性。
深度嵌套上可能影响可维护性，建议确保文档和示例清晰声明可嵌套的层级深度。
129-162: children1 以对象数组形式呈现，结构清晰且便于动态增减条目。
如需在生产环境中频繁修改树结构，建议搭配不可变数据操作方式，确保渲染稳定性。
166-188: children2 和 children1 结构相同，运用状态切换可实现菜单内容的快速切换。
此方式简单易懂，建议在演示组件或文档处提示该用法适合演示场景。
199-199: 在 CommonMenuState 中将 children 显式声明为 ItemType[] 使全局类型更严格。
能有效避免子菜单渲染阶段出现意外的 JSX 元素类型。
208-208: 通过 children1 预设初始状态，便于后续动态切换。
213-213: 在 setState 中使用 children2 替换 children1 展示了动态切换示例。
248-249: 为 Menu 组件绑定 items 属性代替 children，符合最新的菜单结构改动。
在后续与测试用例配合时要注意，避免出现旧的子组件写法与现有 items 同时出现。docs/examples/items.tsx (1)
4-4: 改为从 rc-menu 引入 Menu 符合整体抽离策略。
本示例与其他示例文件保持统一，有助于减少重复维护成本。docs/examples/items-ref.tsx (1)
5-5: 从 rc-menu 引入符合同一仓库代码的统一风格。
Ref 的用法在项目中较为特殊，建议后续验证确保 items 内的 ref 字段在底层能正确赋值。docs/examples/debug.tsx (3)
5-5: 直接从 rc-menu 引入 Menu，利于维护与统一。
若后续需要对 Menu 进行二次封装，可在本地包装后再行扩展。
6-6: 改用 rc-menu 中的 MenuProps 类型确保与库的参数定义一致。
有效减少类型冲突导致的潜在使用风险。
119-203: 基于 items 数组管理多层子菜单且结合多种模式切换，示例功能较强大。
务必在深入调试时关注 openKeys 状态与 inlineCollapsed 的相互影响，防止在动态展开或收起子菜单时出现意外布局。
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
docs/examples/rtl-antd.tsx (1)
52-122: 建议增强类型安全性菜单项已经从 JSX 结构转换为对象结构，建议进一步改进：
- 为嵌套的子菜单对象定义专门的类型接口
- 使用
React.ReactNode替代隐式的 JSX 类型interface SubMenuType extends ItemType { popupOffset?: [number, number]; children: ItemType[]; } const nestSubMenu: SubMenuType = { // ... 现有代码 ... };docs/examples/antd.tsx (3)
53-123: 建议重构深层嵌套的菜单结构当前的
nestSubMenu包含多层嵌套的子菜单，这可能会影响可维护性和用户体验。建议：
- 考虑限制嵌套层级
- 抽取常用的子菜单配置为单独的变量
示例重构：
+const commonInnerMenu: ItemType[] = [ + { + key: 'inner-1', + label: 'inner inner', + }, + { + key: 'inner-2', + label: 'inner inner2', + }, +]; const nestSubMenu: ItemType = { // ... 其他配置保持不变 children: [ { key: '4-1', label: 'inner inner', }, { type: 'divider', }, { key: '4-2', type: 'submenu', label: <span className="submenu-title-wrapper">sub menu 1</span>, children: [ - // 重复的内部菜单结构 + ...commonInnerMenu, ], }, ], };
129-162: 类型定义需要更严格
items1的类型定义可以更加严格，建议使用具体的联合类型来限制type字段的可能值。建议添加以下类型定义：
type MenuItemType = 'submenu' | 'item' | 'divider'; interface BaseItemType { key: string; label?: React.ReactNode; disabled?: boolean; } interface SubMenuType extends BaseItemType { type: 'submenu'; children: ItemType[]; } interface MenuItemTypeWithoutChildren extends BaseItemType { type?: 'item'; } interface DividerType { type: 'divider'; } type ItemType = SubMenuType | MenuItemTypeWithoutChildren | DividerType;
199-199: 移除不必要的类型断言
items: items1 as ItemType[]的类型断言是不必要的，因为items1已经被声明为ItemType[]。- items: items1 as ItemType[], + items: items1,Also applies to: 208-208
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/examples/antd.tsx(6 hunks)docs/examples/rtl-antd.tsx(4 hunks)
🔇 Additional comments (6)
docs/examples/rtl-antd.tsx (4)
5-5: 导入声明更新符合最新 API 规范！移除了不必要的子组件导入，新增
ItemType类型导入，使代码更加简洁且类型安全。Also applies to: 7-7
128-187: 菜单项数据结构优化得当！从
children重命名为items并转换为对象结构的改动：
- ✓ 符合新的 API 设计
- ✓ 提高了代码的可维护性
- ✓ 使数据结构更清晰
192-194: 接口定义更新恰当！
CommonMenuState接口中使用items替代children，与新的 API 设计保持一致。
239-240: Menu 组件属性更新正确！使用
items属性替代子组件的方式符合新的 API 设计规范。docs/examples/antd.tsx (2)
Line range hint
228-249: LGTM! 组件渲染逻辑更新正确成功将基于 children 的渲染方式迁移到了基于 items 的新 API。
5-7: 导入语句的更改符合预期！导入语句的更改反映了从基于 JSX 的子组件迁移到基于
items属性的新 API。不过建议验证@/interface的导入路径。运行以下脚本以验证导入路径：
✅ Verification successful
导入路径验证完成：配置正确！
@/interface的导入路径已正确配置，并且能够正确解析到src/interface.ts。TypeScript 路径别名设置完善，无需任何修改。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 验证 @/interface 的导入路径是否正确配置 # 检查 tsconfig.json 中的路径别名配置 cat tsconfig.json | jq '.compilerOptions.paths' # 搜索实际的接口文件位置 fd -e ts -e tsx "interface.ts"Length of output: 200
| @@ -173,7 +170,6 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => { | |||
| className, | |||
| tabIndex = 0, | |||
| items, | |||
| children, | |||
There was a problem hiding this comment.
Menu 里有个 aria-hidden 的元素用来收集 children 结构的数据，现在不需要就可以一起删了。
There was a problem hiding this comment.
PathRegisterContext 这个相关的代码都不需要了
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
tests/SubMenu.spec.tsx (2)
51-88: 测试助手函数实现良好！使用
items属性的新实现更加清晰和可维护。建议添加一个简短的函数文档来说明数据结构。建议添加如下文档：
+/** + * 创建测试用的菜单组件 + * @param props - 要传递给 Menu 组件的属性 + * @returns 配置好的 Menu 组件，包含预设的子菜单结构 + */ function createMenu(props?) {
369-390: 建议增强错误处理测试用例当前的未定义键测试用例很好，但建议添加更多边缘情况的测试。
建议添加以下测试场景：
- 重复的 key 值
- 空的 label 值
- 无效的 type 值
示例：
it('should warn on duplicate keys', () => { resetWarned(); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); render( <Menu items={[ { key: 'same', label: '1' }, { key: 'same', label: '2' }, ]} /> ); expect(errorSpy).toHaveBeenCalledWith( expect.stringContaining('Duplicate keys detected') ); errorSpy.mockRestore(); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
tests/SubMenu.spec.tsx(14 hunks)
🔇 Additional comments (2)
tests/SubMenu.spec.tsx (2)
5-5: 导入语句的更改符合预期！删除
MenuItem和SubMenu的导入符合弃用 JSX 组件 API 的目标。
Line range hint
1-694: 整体实现符合预期，代码质量良好！成功完成了从 JSX 子组件到
items属性的迁移，同时保持了完整的测试覆盖率。代码结构清晰，测试用例完整。
Summary by CodeRabbit
发布说明
新功能
items属性更灵活地定义菜单结构title、role和key属性disabled属性以支持禁用状态改进
children属性重大变更
openTransitionName和openAnimation