fix(formItem):修复formItem中的help属性失效的问题 #9249
Conversation
dosubot
bot
added
the
size:S
📝 WalkthroughWalkthrough在 FormItem 组件中，调整无 addon 分支的渲染：启用常规 help 属性渲染，移除 _internalItemRender 覆写；带 addon 分支仍保留 _internalItemRender，并仅在此分支支持函数式 help 渲染。未改动任何公开 API 签名。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as 使用者
participant FormItem as Form.Item
participant Renderer as 默认渲染
participant AddonWrap as _internalItemRender(带addon)
participant HelpFn as help(函数)
User->>FormItem: 渲染请求(props: addonBefore/After?, help)
alt 带 addon
FormItem->>AddonWrap: 使用 _internalItemRender 包裹输入框
alt help 为函数
AddonWrap->>HelpFn: 调用 help(props)
HelpFn-->>AddonWrap: 返回节点
else help 非函数/未提供
AddonWrap->>AddonWrap: 传递 help 作为普通节点/空
end
AddonWrap-->>User: 输出带 addon 的表单项
else 无 addon
FormItem->>Renderer: 使用默认渲染
Renderer->>Renderer: 直接传入 help（仅普通值）
note right of Renderer: 不调用函数式 help
Renderer-->>User: 输出普通表单项
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @echoyl, 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!
此拉取请求旨在解决 FormItem 组件中 help 属性失效的问题。通过取消对相关代码的注释并移除冗余的注释块，确保了表单项的帮助信息能够正确显示，从而提升了用户界面的可用性。
Highlights
- 修复 FormItem 的 help 属性问题: 恢复了
Form.Item组件中help属性的正确处理，移除了之前注释掉的代码，确保help属性能够正常生效。
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/form/components/FormItem/index.tsx (1)
210-260: 重复展开 {...props} 会覆盖已过滤的 help，存在运行时风险在 addon 分支中，先设置了过滤后的 help（仅非函数），但紧接着再次
{...props}（见 Line 255），会把原始props.help（可能是函数）重新传入 Form.Item。若最终传给 Form.Item 的 help 为函数，React 可能抛出 “Functions are not valid as a React child” 的运行时错误；同时也可能无意覆盖_internalItemRender、valuePropName等属性。建议移除第二次展开：<Form.Item {...props} help={typeof help !== 'function' ? help : undefined} valuePropName={valuePropName} // @ts-ignore _internalItemRender={{ mark: 'pro_table_render', render: ( inputProps: FormItemProps & { errors: React.ReactNode[]; warnings: React.ReactNode[]; }, doms: { input: JSX.Element; errorList: JSX.Element; extra: JSX.Element; }, ) => ( <> ... </> ), }} - {...props} getValueProps={getValuePropsFunc} >
🧹 Nitpick comments (3)
src/form/components/FormItem/index.tsx (3)
196-207: 确认行为变更：无 addon 分支不再支持函数型 help现在仅 addon 分支会执行函数型 help，无 addon 分支会忽略函数型 help。请确认这是预期（并在变更说明中注明），或考虑在无 addon 时按需启用自定义渲染以保持两条路径一致性。我可以帮你补一组用例覆盖“有/无 addon × help 为节点/函数”四种情况。
245-251: 自定义 help 返回空值时丢失错误列表，建议回退到默认 errorList当前当
help为函数时，直接用函数结果替代doms.errorList。若函数返回null/undefined，默认错误列表会被吞掉。可以加一个空值回退：- {typeof help === 'function' - ? help({ - errors: inputProps.errors, - warnings: inputProps.warnings, - }) - : doms.errorList} + {typeof help === 'function' + ? (help({ + errors: inputProps.errors, + warnings: inputProps.warnings, + }) ?? doms.errorList) + : doms.errorList}
262-263: useMemo 依赖包含整个 props，实际失去 memo 意义
[addonAfter, addonBefore, children, convertValue?.toString(), props]中的props引用每次渲染都会变化，导致formDom基本每次重建。可选优化：改为精确依赖（仅列出用到的 props 字段）或干脆移除 useMemo。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/form/components/FormItem/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{tsx,jsx}: Use early returns whenever possible to make the code more readable.
Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
Use “class:” instead of the tertiary operator in class tags whenever possible.
Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.
Files:
src/form/components/FormItem/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: build (20.x, ubuntu-latest)
- GitHub Check: build
- GitHub Check: build
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
src/form/components/FormItem/index.tsx (1)
196-206: 启用无 addon 分支的 help 渲染，方向正确将普通（非函数）help 交给 Form.Item 默认渲染，能修复“help 属性不生效”的核心问题，符合 PR 目标。
Summary by CodeRabbit
新增修复
重构
杂务