refactor: 调整 MenuItem 渲染逻辑，将 label 包装在 span 中并优化条件判断 #843
Conversation
概览该变更在菜单项中引入 变更
估算代码审查工作量🎯 2 (Simple) | ⏱️ ~10 分钟 可能相关的 PR
建议审查者
诗
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @LovePlayCode, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在解决 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| return <MergedDivider key={mergedKey} {...restProps} />; | ||
| } | ||
|
|
||
| const hasExtra = !!extra || extra === 0; |
There was a problem hiding this comment.
为了使代码更简洁，这里的条件判断可以省略 !!。在 JavaScript 的布尔运算中，extra 会被自动转换为布尔值进行判断，因此 !!extra 和 extra 在此处的逻辑效果是等价的。
| const hasExtra = !!extra || extra === 0; | |
| const hasExtra = extra || extra === 0; |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/utils/nodeUtil.tsx (1)
52-55: 移除冗余的extraprop 传递，仅通过 children 渲染
extra属性通过 prop 传递给MergedMenuItem，但 MenuItem 组件会显式忽略它（参见 MenuItem.tsx 中的omit(restProps, ['extra'])）。实际的 extra 内容仅通过 children 中的 span 元素渲染。建议只通过 children 方式传递 extra 内容，移除不必要的 prop 传递，以简化代码逻辑。
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/MenuItem.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/utils/nodeUtil.tsx
🔇 Additional comments (1)
src/utils/nodeUtil.tsx (1)
50-50: hasExtra 逻辑正确处理了 0 值这行代码正确地将
0视为有效的extra值，符合预期行为。这样可以确保当extra为0时，label 也会被包装在 span 中以支持文字省略。
| {hasExtra ? <span className={`${prefixCls}-item-label`}>{label}</span> : label} | ||
| {hasExtra && <span className={`${prefixCls}-item-extra`}>{extra}</span>} |
There was a problem hiding this comment.
潜在问题：prefixCls 可能为 undefined 导致无效的 class 名称
当 prefixCls 为 undefined 时（函数参数中标记为可选），模板字符串 `${prefixCls}-item-label` 会生成 "undefined-item-label" 这样的无效 class 名称。
建议添加保护逻辑：
🔎 建议的修复方案
方案一：添加默认值
- {hasExtra ? <span className={`${prefixCls}-item-label`}>{label}</span> : label}
- {hasExtra && <span className={`${prefixCls}-item-extra`}>{extra}</span>}
+ {hasExtra ? <span className={prefixCls ? `${prefixCls}-item-label` : 'item-label'}>{label}</span> : label}
+ {hasExtra && <span className={prefixCls ? `${prefixCls}-item-extra` : 'item-extra'}>{extra}</span>}方案二：在函数开始处验证 prefixCls
在 convertItemsToNodes 函数中添加断言或默认值：
function convertItemsToNodes(
list: ItemType[],
components: Required<Components>,
prefixCls: string = 'rc-menu', // 添加默认值
) {
// ...
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {hasExtra ? <span className={`${prefixCls}-item-label`}>{label}</span> : label} | |
| {hasExtra && <span className={`${prefixCls}-item-extra`}>{extra}</span>} | |
| {hasExtra ? <span className={prefixCls ? `${prefixCls}-item-label` : 'item-label'}>{label}</span> : label} | |
| {hasExtra && <span className={prefixCls ? `${prefixCls}-item-extra` : 'item-extra'}>{extra}</span>} |
🤖 Prompt for AI Agents
In src/utils/nodeUtil.tsx around lines 53-54, the template strings using
prefixCls can produce invalid class names when prefixCls is undefined; ensure
prefixCls has a safe default or validate it at function entry (e.g., set
prefixCls = 'rc-menu' or assert/throw if missing) so subsequent
`${prefixCls}-item-label` and `${prefixCls}-item-extra` produce valid class
names; update the function signature or add an early guard to normalize
prefixCls before use.
1 participant
解决52602 的问题，在 menu 组件中，如果传入了 extra，文字超长时无法显示省略号，因此进行了判断，如果发现有 extra，添加 span 标签包裹。
Summary by CodeRabbit
发布说明
Bug Fixes（错误修复）
UI/样式改进
✏️ Tip: You can customize this high-level summary in your review settings.