SuperAPI AI 工具集

shadcn-errors-react-day-picker-v9

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:当 shadcn 的 Calendar(或直接使用的 react-day-picker DayPicker)出现静默无渲染、selected 属性 TypeScript 报错、选择状态不更新、样式丢失、自定义组件不生效等 v8→v9 升级回归问题时,用本技能定位并修复。react-day-picker 9.0.0 几乎重塑了所有公开属性名、classNames 键、组件覆盖接口与格式化器契约;旧 v8 属性在 v9 中仍能通过 JSX 解析,但会被静默忽略,症状因此不明显。

主要能力:提供 v8→v9 属性重命名表(如 selectedDays→selected、disabledDays→disabled、modifiers 数组改对象、components.Caption→MonthCaption、IconLeft/IconRight→Chevron、Row→Week、HeadRow→Weekdays、Day→DayButton、fromMonth→startMonth、toMonth→endMonth、DayPickerSingleProps→PropsSingle、useNavigation→useDayPicker、CSS 路径改为 react-day-picker/style.css);说明 v9 中 mode 为必填且显式声明;classNames 按 UI 枚举键重设,建议用 getDefaultClassNames() 与 cn(...) 合并;说明 dateLib 适配器取代直接 date-fns;给出症状→成因→修复矩阵与升级后诊断决策树。

使用方式:先查重命名表再改属性;TypeScript 报错按 mode 必填、属性不存在等对照处理;样式问题检查 CSS 导入路径与 classNames 键;若 components/ui/calendar.tsx 本身仍是 v8 形态(不含 getDefaultClassNames、未映射 Chevron),运行 npx shadcn@latest diff calendar 预览后执行 npx shadcn@latest add calendar --overwrite 重写,再按重命名表修复消费端。

适用场景:项目刚升级 react-day-picker@9 后日历选择、样式、自定义标题与图标异常,或需要把 v8 写法的日历代码迁移到 v9。

限制:资料未提供收费、价格、平台或效果数据;技能指向的 references/methods.md、examples.md、anti-patterns.md 等参考文件内容暂未提供。