feat: support ref parameter for Image component #373
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
修正 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>) => { |
src/Image.tsx
Outdated
| ref={(img) => { | ||
| getImgRef(img); | ||
|
|
||
| if (ref) { | ||
| ref.current = img | ||
| } | ||
| }} |
There was a problem hiding this comment.
正确地转发 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; | |
| } | |
| }} |
SimerW
force-pushed
the
feat/ref-parameter-for-image
branch
from
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>元素交互。文档