-
-
Notifications
You must be signed in to change notification settings - Fork 105
feat: support ref parameter for Image component #373
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Caution Review failedThe pull request is closed. Walkthrough此次更改主要集中在 Changes
Poem
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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/Image.tsx (4 hunks)
🧰 Additional context used
🔇 Additional comments (3)
src/Image.tsx (3)
7-7
: 导入语句更新正确。引入了
forwardRef
和MutableRefObject
,为组件支持ref
提供了必要的依赖。
72-74
: 接口CompoundedComponent
更新合理。添加了泛型参数
T
并扩展了React.ForwardRefExoticComponent
,以支持ref
的类型定义。
269-269
: 类型断言更新正确。将
ImageInternal
类型断言为CompoundedComponent<ImageProps, HTMLImageElement>
,与接口定义一致。
src/Image.tsx
Outdated
const ImageInternal = forwardRef< | ||
HTMLImageElement, | ||
ImageProps | ||
>((props, ref: MutableRefObject<HTMLImageElement>) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
修正 ref
参数的类型定义。
在 forwardRef
中,ref
参数的类型应为 React.Ref<HTMLImageElement>
,而不是 MutableRefObject<HTMLImageElement>
。这样可以确保类型定义与 React 的 forwardRef
类型一致。
您可以应用以下修改:
>((props, ref: MutableRefObject<HTMLImageElement>) => {
+>((props, ref: React.Ref<HTMLImageElement>) => {
📝 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.
const ImageInternal = forwardRef< | |
HTMLImageElement, | |
ImageProps | |
>((props, ref: MutableRefObject<HTMLImageElement>) => { | |
const ImageInternal = forwardRef< | |
HTMLImageElement, | |
ImageProps | |
>((props, ref: React.Ref<HTMLImageElement>) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/Image.tsx
Outdated
ref={(img) => { | ||
getImgRef(img); | ||
|
||
if (ref) { | ||
ref.current = img | ||
} | ||
}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
正确地转发 ref
,处理函数和对象类型的 ref
。
当前实现只处理了 ref
为对象的情况,如果用户传递的是函数类型的 ref
,将无法正确处理。应同时支持函数和对象类型的 ref
。
可以将代码修改为:
ref={(img) => {
getImgRef(img);
- if (ref) {
- ref.current = img
- }
+ if (typeof ref === 'function') {
+ ref(img);
+ } else if (ref) {
+ ref.current = img;
+ }
}}
📝 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.
ref={(img) => { | |
getImgRef(img); | |
if (ref) { | |
ref.current = img | |
} | |
}} | |
ref={(img) => { | |
getImgRef(img); | |
if (typeof ref === 'function') { | |
ref(img); | |
} else if (ref) { | |
ref.current = img; | |
} | |
}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
54e3a40
to
7f8c787
Compare
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #373 +/- ##
==========================================
- Coverage 99.78% 99.37% -0.42%
==========================================
Files 15 15
Lines 470 477 +7
Branches 134 136 +2
==========================================
+ Hits 469 474 +5
- Misses 1 3 +2 ☔ View full report in Codecov by Sentry. |
#372
Summary by CodeRabbit
新功能
ImageInternal
组件的结构和功能,支持通过ref
直接与<img>
元素交互。文档