企业官网建设流程全解析

• UI组件
• 前端

导读

WeekdayProps是 react-day-picker 为Weekday组件定义的类型别名，描述了渲染日历表头中星期名称单元格（如 “Mo”“Tu”）时组件接收的全部 props。它本质上是 React 原生ThHTMLAttributes<HTMLTableCellElement>的再导出，因此你可以像操作普通<th>元素一样自由扩展星期表头的行为与样式。阅读本篇后，你将掌握该类型的精确定义、在 DayPicker 内部的渲染与调用位置，以及如何通过components属性安全地自定义Weekday而不会破坏无障碍与键盘导航。

类型别名定义：一行代码的完整契约

WeekdayProps在 API 文档中的定义极其简洁，全貌如下：

WeekdayProps=Parameters<typeofWeekday>[0]

它定义于 packages/react-day-picker/src/components/Weekday.tsx:13。从类型推导的角度看，这个别名做了两件事：

1. 通过typeof Weekday取得Weekday函数的类型；
2. 通过Parameters<...>[0]提取该函数的第一个参数类型，也就是组件接收的 props 对象类型。

因此，WeekdayProps与Weekday组件的签名天然保持同步：只要Weekday的 props 发生变化，WeekdayProps会自动跟随，不会出现类型定义与实现脱节的问题。这也是 react-day-picker 中大量组件（如WeekdaysProps、MonthGridProps、WeekProps）统一采用的类型推导模式。

Weekday 组件源码：一个极薄的<th>渲染器

打开 Weekday.tsx，整个实现只有几行：

import React, { type ThHTMLAttributes } from "react"; export function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>) { return <th {...props} />; } export type WeekdayProps = Parameters<typeof Weekday>[0];

关键信息如下：

• Weekday接收ThHTMLAttributes<HTMLTableCellElement>类型的 props，即标准<th>元素支持的全部属性；
• 组件内部不做任何逻辑处理，直接展开 props 渲染为一个<th>；
• JSDoc 注释明确其职责是“渲染包含星期名称（如 “Mo”、“Tu”）的表格表头单元格”，并归属于 Components 分组，文档链接指向自定义组件指南 custom-components.mdx。

这意味着WeekdayProps携带的属性集合与 React 内置th元素完全一致，涵盖scope、abbr、colSpan、rowSpan、className、style、aria-*、data-*、事件处理器以及ref等。

渲染流程：Weekday 在 DayPicker 中的调用位置

Weekday不是孤立存在的，它在月网格渲染中承担表头行（由Weekdays组件包裹的<thead>）的单元格输出任务。查看 DayPicker.tsx 中的调用片段：

{!props.hideWeekdays && ( <components.Weekdays >import { Weekday, type WeekdayProps, DayPicker } from "@daypicker/react"; function CustomWeekday(props: WeekdayProps) { return ( <Weekday {...props} className={`${props.className} my-weekday`}> {/* 保留默认文本，同时叠加自定义内容 */} {props.children} </Weekday> ); } export function Example() { return <DayPicker components={{ Weekday: CustomWeekday }} />; }

由于WeekdayProps等价于ThHTMLAttributes<HTMLTableCellElement>，你可以在不丢失类型检查的前提下访问className、children、aria-label等标准属性；

值得强调的是：如果你只是想修改星期名称的显示文本（例如显示全称而非缩写），更轻量的做法是使用 formatters（formatWeekdayName），而不是替换整个组件结构——自定义组件用于改变 HTML 结构，formatters 用于改变文本内容，二者定位不同。

无障碍与样式配置要点

由于Weekday是表格表头单元格，DayPicker 默认会为其传入scope="col"和aria-label，这构成了星期表头的无障碍基线。自定义时请特别注意：

• 不要移除aria-label，它是屏幕阅读器朗读星期名的关键（默认实现来自 labelWeekday.ts，并随 locale 变化）；
• 默认Weekdays组件外层是<thead aria-hidden>（见 Weekdays.tsx），表头行对辅助技术隐藏，但单元格内的aria-label仍服务于其他语义场景，自定义时不要随意更改这一结构。

样式层面，classNames与styles配置中的UI.Weekday键会直接映射到每个Weekday的className与style属性上（见上文 DayPicker.tsx 调用片段），因此修改星期表头外观通常不需要自定义组件，配置 CSS 即可。

总结

• WeekdayProps=Parameters<typeof Weekday>[0]=ThHTMLAttributes<HTMLTableCellElement>，定义于 Weekday.tsx:13；
• 它是 DayPicker 星期表头<th>单元格的 props 契约，在 DayPicker.tsx 中被注入aria-label、scope="col"、className、style与星期名文本；
• 需要结构级定制时，通过components={{ Weekday }}替换并透传 props；仅改文本时优先使用 formatters；
• 保持aria-label、scope与 classNames/styles 的透传，是无障碍与主题一致性的底线。

相关阅读：Weekday 组件文档、自定义组件指南、网格与月份指南、useDayPicker 上下文。

• UI组件
• 前端