fix: 兼容nextjs ssr，Col组件初始状态class=""元素会闪一下 #3358
Conversation
Walkthrough在 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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. Comment |
github-actions
bot
added
action:review
KouSum
changed the title
![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
🧹 Nitpick comments (1)
src/packages/col/col.tsx (1)
52-55: 依赖列表缺失 isFirst/isLast，可能导致左右内边距未更新getStyle 依赖 isFirst/isLast，但 effect 依赖中未包含，Row 改变首末列时可能不会触发更新。
- }, [span, offset, gutter]) + }, [span, offset, gutter, isFirst, isLast])
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/col/col.tsx(1 hunks)
🔇 Additional comments (2)
src/packages/col/col.tsx (2)
50-51: SSR 首帧计算初值已对齐 props，能避免 Next.js 下的闪烁 — LGTM通过在 useState 中用 classs()/getStyle() 的计算初值，首屏即可得到稳定 class/style，方向正确。
13-20: 修复：将 gutter 默认值从字符串 '0' 改为数字 0，并按数值判断以避免 SSR/CSR 不一致defaultProps.gutter 当前为字符串 '0'（truthy），会在 gutter === '0' 时仍添加 gutter 类，导致类名与样式不一致并可能产生 SSR/CSR 或视觉偏差。
@@ - gutter: '0', + gutter: 0, @@ - return `${prefixCls} ${prefixCls}-${span} ${ - gutter ? `${prefixCls}-gutter` : '' - } ${prefixCls}-offset-${offset}` + return `${prefixCls} ${prefixCls}-${span} ${ + Number(gutter) > 0 ? `${prefixCls}-gutter` : '' + } ${prefixCls}-offset-${offset}` @@ - const style: CSSProperties = {} - if (!isFirst) { - style.paddingLeft = `${(gutter as number) / 2}px` - } - if (!isLast) { - style.paddingRight = `${(gutter as number) / 2}px` - } + const style: CSSProperties = {} + const g = Number(gutter) || 0 + if (!isFirst) { + style.paddingLeft = `${g / 2}px` + } + if (!isLast) { + style.paddingRight = `${g / 2}px` + }文件：src/packages/col/col.tsx（行 13-20；相关代码块也在 32-38、39-49）。确认 WebColProps.gutter 的类型为 number；若不是，更新类型或在组件中使用 Number(gutter) || 0 做兼容处理。可在仓库根目录运行以下命令验证类型（不要指定 --type）：
rg -nP -C2 '(export\s+)?(interface|type)\s+WebColProps\b' rg -nP -C2 '\bWebColProps\b|gutter\s*:'
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3358 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19212
Branches 2988 2988
==========================================
Hits 16937 16937
Misses 2269 2269
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
兼容nextjs ssr，Col组件的class初始状态为
class=""元素会闪一下☑️ 请求合并前的自查清单
Summary by CodeRabbit