添加自定义components后React-Day-Picker弹窗无法打开怎么办？

问题根源 #

你自定义Day组件时，props解构出现语法错误——displayMonth后缺少逗号，导致React-Day-Picker传递的点击事件等关键props没被正确解构并传递给button，最终无法触发onSelect对应的openDialogBox函数。

修复步骤 #

1. 修正props解构语法
   在自定义Day组件的参数解构中，给displayMonth后添加逗号，确保剩余props能被正确获取：

   Day: ({ date: dayDate, displayMonth, ...props }) => {
   

2. 确保button完整接收props
   保持button上的{...props}展开，这样React-Day-Picker内置的点击事件处理逻辑会被绑定到按钮上，点击日期时就能正常触发onSelect回调。

3. 可选：自定义点击扩展
   如果需要在点击时添加额外逻辑，可在button的onClick中保留原事件触发：

   <button
     {...props}
     onClick={(e) => {
       props.onClick?.(e); // 先触发组件原有的点击逻辑
       // 这里可以添加你的自定义点击逻辑
     }}
     className={`relative h-9 w-9  ${dateHasEvent ? 'bg-red-100 hover:bg-red-200' : ""} text-lg rounded-md p-0 font-normal hover:bg-accent hover:text-accent-foreground focus:bg-red-300/80 focus:text-accent-foreground`}
   >
   

修复后点击日期，openDialogBox函数会正常执行，弹窗也能顺利打开。

内容的提问来源于stack exchange，提问作者Stykgwar