feat(error-block): 支持动态生成svg元素id - #7063
Conversation
- 为svg元素添加唯一id避免冲突 - 修改imageRecord类型支持函数形式 - 更新所有状态图片组件接收id参数
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough四个 ErrorBlock SVG 图片改为内部 React 组件。组件使用 ChangesErrorBlock SVG ID 参数化
Estimated code review effort: 3 (Moderate) | ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
dosubot
Bot
added
size:L
commit: |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the ErrorBlock component and its default SVG images to dynamically generate unique element IDs using the useId hook, preventing ID collisions when multiple error blocks are rendered. The SVG image components are converted into functions that accept an id parameter, and the ImageRecord type is updated accordingly. The reviewer noted that the ErrorBlockProps type definition for the image prop should also be updated to include the new function signature to prevent TypeScript errors.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
- 将error-block-image-default改为error-block-image-test-id - 确保测试id的一致性
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #7063 +/- ##
==========================================
+ Coverage 92.97% 93.30% +0.32%
==========================================
Files 337 337
Lines 7402 7434 +32
Branches 1887 1898 +11
==========================================
+ Hits 6882 6936 +54
+ Misses 484 466 -18
+ Partials 36 32 -4 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
- 将图片组件重构为工厂函数模式 - 导出默认实例和工厂函数 - 保持原有功能不变
| import React from 'react' | ||
|
|
||
| export const busyImage = ( | ||
| export const busyImageFactory = (id: string) => ( |
There was a problem hiding this comment.
感觉不需要 export，你内部封装成一个组件然后 export 出来：
https://codesandbox.io/p/sandbox/fk6l9z?file=%2Fsrc%2FApp.tsx%3A8%2C12
按 ant-design#7063 评审意见，不再导出 *ImageFactory 工厂函数与静态常量，改为 导出接收 id 的 FC 组件；createErrorBlock 以组件方式渲染并注入 useId 生成的唯一 id，避免多实例下 svg id 冲突。
按 ant-design#7063 评审意见，不再导出工厂函数与静态常量，改为把每张图封装成 内部自行 useId() 生成唯一 id 的组件，并 export <组件/> 元素。 createErrorBlock 无需感知 id，还原为直接渲染元素的逻辑，避免多实例 svg id 冲突。
e7ea39a to
232fabb
Compare
dosubot
Bot
added
size:XL
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/error-block/create-error-block.tsx (1)
15-15: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win恢复
image工厂函数兼容性。此修改删除了
ErrorBlockProps.image的工厂函数形式，并且不再调用该函数。现有的image={id => <svg />}调用会无法通过 TypeScript 检查；JavaScript 调用会将函数作为 React 子节点，导致图片不渲染。保留工厂函数分支，并继续向它传入实例级
id。内置图片可以继续使用当前的ReactElement实现。建议修改
+import useId from 'rc-util/lib/hooks/useId' - image?: string | ReactElement + image?: string | ReactElement | ((id: string) => ReactElement) + const id = useId() const image: ReactNode = props.image ?? imageRecord[props.status] const imageNode = typeof image === 'string' ? ( <img src={image} alt='error block image' /> + ) : typeof image === 'function' ? ( + image(id) ) : ( image )Also applies to: 39-45
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/error-block/create-error-block.tsx` at line 15, 恢复 ErrorBlockProps.image 的工厂函数类型，支持接收实例级 id 并返回 ReactElement；在 ErrorBlock 渲染逻辑中识别 image 为函数时调用它并传入该实例 id，非函数值继续按现有 ReactElement 直接渲染，确保内置图片行为不变。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/components/error-block/create-error-block.tsx`:
- Line 15: 恢复 ErrorBlockProps.image 的工厂函数类型，支持接收实例级 id 并返回 ReactElement；在
ErrorBlock 渲染逻辑中识别 image 为函数时调用它并传入该实例 id，非函数值继续按现有 ReactElement
直接渲染，确保内置图片行为不变。
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: eee52163-07d7-4572-a24d-8259d6639c58
📒 Files selected for processing (7)
src/components/error-block/create-error-block.tsxsrc/components/error-block/error-block.tsxsrc/components/error-block/images/busy.tsxsrc/components/error-block/images/default.tsxsrc/components/error-block/images/disconnected.tsxsrc/components/error-block/images/empty.tsxsrc/components/error-block/images/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/error-block/images/index.tsx
按 ant-design#7063 评审意见，内置图片已改为内部 useId 组件；但 ErrorBlock.image 作为公开 API 仍需支持 (id) => ReactElement 工厂函数，由 createErrorBlock 用 useId 生成实例级 id 传入。ImageRecord 类型同步补回工厂函数分支。
| status?: ErrorBlockStatus | ||
| title?: ReactNode | ||
| image?: string | ReactElement | ||
| image?: string | ReactElement | ((id: string) => ReactElement) |
按 ant-design#7063 zombieJ 评审，内置图片组件内部已自行 useId 生成唯一 id， createErrorBlock 无需再引入 useId 或为 image 新增工厂函数分支。 还原 image 类型为 string | ReactElement、ImageRecord 为 string | ReactNode。
2 participants
close #6744 为svg元素添加唯一 id 避免浏览器会跳过或错误地渲染引用元素，导致 SVG 图形显示异常
Summary by CodeRabbit
Bug Fixes
Refactor