：理解 React DayPicker 的 Modifier 類型)
UI組件前端【免費(fèi)下載鏈接】react-day-pickerDayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.項目地址https://gitcode.com/gh_mirrors/re/react-day-picker點(diǎn)擊查看免費(fèi)下載DayPicker 用Modifier修飾器來表示日歷中一個日期的不同樣式或狀態(tài)。這個類型別名在 src/types/Modifiers.ts 中定義為string。本文將從這一看似簡單的定義出發(fā)拆解 DayPicker 修飾器系統(tǒng)的完整設(shè)計內(nèi)部修飾器如selected、disabled、today、自定義修飾器modifiersprop、修飾器的匹配與傳播以及如何在樣式和可訪問性中使用它們。注意本文內(nèi)容基于倉庫中 version-8.10.2 版本的 API 文檔。版本 9 及更高版本對修飾器 API 做了一些調(diào)整例如modifiersClassNames被重構(gòu)本文的代碼示例均以 8.10.2 為準(zhǔn)。Modifier的定義Modifier:string一個modifier修飾器代表日歷中顯示的一個日期的不同樣式或狀態(tài)。它本身就是一個字符串用作修飾器名稱modifier name這些字符串是修飾器映射modifier map中的鍵key控制 DayPicker 如何表現(xiàn)和顯示日期。源碼中它的定義位于 src/types/Modifiers.ts:9// 邏輯定義type Modifier string雖然類型簡單但它支撐起整個修飾器系統(tǒng)——多個復(fù)合類型都以它為鍵類型別名定義說明DayModifiersRecordModifier, Matcher \| Matcher[]通過modifiersprop 傳入的自定義修飾器CustomModifiersRecordModifier, Matcher[]自定義修飾器的映射值只能是Matcher數(shù)組ActiveModifiersRecordModifier, true PartialRecordInternalModifier, true與某個日期匹配的修飾器集合這些類型都圍繞同一個概念修飾器名稱Modifier字符串→ 匹配規(guī)則Matcher或匹配結(jié)果true。內(nèi)部修飾器DayPicker 內(nèi)置了一組內(nèi)部修飾器其名稱由 InternalModifier 枚舉 定義枚舉成員值說明Disableddisabled通過disabledprop 應(yīng)用到被禁用日期的修飾器Hiddenhidden通過hiddenprop 應(yīng)用到被隱藏日期的修飾器Outsideoutside應(yīng)用于當(dāng)前顯示月份之外的日期外部日期RangeEndrange_end范圍選擇模式下應(yīng)用于所選范圍的結(jié)束日RangeMiddlerange_middle范圍選擇模式下應(yīng)用于所選范圍的中間日RangeStartrange_start范圍選擇模式下應(yīng)用于所選范圍的開始日Selectedselected通過selectedprop 應(yīng)用到被選中日期的修飾器Todaytoday通過todayprop 應(yīng)用到指定日期的修飾器這些內(nèi)部修飾器在 DayPickerBase 接口中通過對應(yīng) props 配置disabled?: Matcher | Matcher[]將disabled修飾器應(yīng)用到匹配的日期。hidden?: Matcher | Matcher[]將hidden修飾器應(yīng)用到匹配的日期并將其從日歷中隱藏。selected?: Matcher | Matcher[]將selected修飾器應(yīng)用到匹配的日期。today?: Date設(shè)置“今天”的日期默認(rèn)是當(dāng)前日期該日期會獲得today修飾器。例如選中 2024 年 10 月 1 日并禁用 2024 年 10 月 15 日DayPicker selected{new Date(2024, 9, 1)} disabled{new Date(2024, 9, 15)} /匹配邏輯isMatch修飾器名稱是如何被應(yīng)用到具體日期上的關(guān)鍵在于 isMatch 函數(shù)其源碼位于 src/contexts/Modifiers/utils/isMatch.ts。它接受一個日期和一個Matcher數(shù)組返回該日期是否匹配任何一個匹配器。匹配器Matcher可以是一個日期、一個日期范圍{from, to}、一個星期幾{dayOfWeek}、一個布爾函數(shù)或任意組合。這也是 DayPicker 能支持 禁用日期、范圍選擇 等功能的基礎(chǔ)。自定義修飾器modifiers prop除了內(nèi)部修飾器DayPicker 還允許通過modifiersprop 定義自定義修飾器。modifiers的類型是 DayModifiersRecordModifier, Matcher | Matcher[]也就是一個從修飾器名稱映射到匹配規(guī)則的記錄。import { DayPicker } from react-day-picker; export function App() { return ( DayPicker modifiers{{ weekend: { dayOfWeek: [0, 6] }, // 匹配周六和周日 holiday: new Date(2024, 9, 1), // 匹配特定日期 past: { before: new Date() }, // 匹配所有過去的日期 }} / ); }自定義修飾器也可以與內(nèi)置修飾器組合使用例如先禁用一部分日期、再對它們應(yīng)用自定義樣式DayPicker disabled{{ before: new Date() }} modifiersClassNames{{ disabled: my-disabled-day, holiday: my-holiday-day, }} /CustomModifiers 與DayModifiers的區(qū)別在于它只接受Matcher數(shù)組RecordModifier, Matcher[]。修飾器的匹配結(jié)果ActiveModifiers當(dāng) DayPicker 渲染每個日期時會計算出該日期匹配的所有修飾器生成一個ActiveModifiers對象src/types/Modifiers.tsconst activeModifiers: ActiveModifiers { selected: true, customModifier: true };這是一個RecordModifier, true與PartialRecordInternalModifier, true的交叉類型。它的鍵就是匹配上的修飾器名稱Modifier值固定為true。在自定義DayContent或DayButton中你可以通過 useActiveModifiers hook 獲取某個日期的活動修飾器import { useActiveModifiers } from react-day-picker; function MyDayContent({ date, displayMonth }) { const activeModifiers useActiveModifiers(date, displayMonth); // activeModifiers.selected true 表示該日期被選中 return div{date.getDate()}/div; }修飾器驅(qū)動的樣式與類名修飾器最主要的用途之一是驅(qū)動樣式。DayPicker 8.x 提供兩種方式modifiersClassNamesRecordstring, string為匹配某修飾器的日期元素指定 CSS 類名。modifiersStylesRecordstring, CSSProperties為匹配某修飾器的日期元素指定內(nèi)聯(lián)樣式。DayPicker modifiers{{ weekend: { dayOfWeek: [0, 6] } }} modifiersClassNames{{ weekend: weekend-day }} modifiersStyles{{ weekend: { color: red } }} /在底層getStyleForModifiers 等輔助函數(shù)負(fù)責(zé)把匹配到的修飾器轉(zhuǎn)換成最終的樣式/類名。你可以在 getStyleForModifiers.test.ts 和 createGetModifiers.test.ts 中看到對應(yīng)的測試用例例如如何為單個日期同時應(yīng)用多個修飾器樣式。修飾器的計算與傳播每個日期的完整修飾器集合由 createGetModifiers 計算在 DayPicker.tsx:199 中調(diào)用它合并了兩部分內(nèi)部修飾器InternalModifier根據(jù)selected、disabled、hidden、today、范圍選擇狀態(tài)等 props 自動計算自定義修飾器DayModifiers來自modifiersprop。結(jié)果通過 DayPickerContext 提供給各個子組件day 按鈕、day 內(nèi)容等從而統(tǒng)一影響樣式、類名以及可訪問性標(biāo)簽。在可訪問性標(biāo)簽中使用修飾器修飾器還可以驅(qū)動可訪問性文本。labelDayButton 的測試展示了如何根據(jù)修飾器如selected、disabled生成日期按鈕的aria-label讓屏幕閱讀器用戶能夠了解日期的狀態(tài)const dayModifiers: Modifiers { selected: true, disabled: false }; // 生成類似 2024 年 10 月 1 日已選中 的標(biāo)簽這也是 DayPicker 在 可訪問性指南 中承諾的基礎(chǔ)之一?？偨Y(jié)Modifier類型雖然只是一個string卻是 DayPicker 修飾器系統(tǒng)的“膠水”它作為修飾器名稱modifier name把Modifier → Matcher → 匹配結(jié)果 → 樣式/標(biāo)簽這條鏈路串起來。理解了它你就理解了 DayPicker 如何通過selected、disabled、hidden、today等內(nèi)部修飾器和modifiers自定義修飾器靈活地控制日期的外觀、狀態(tài)與可訪問性。贊分享UI組件前端【免費(fèi)下載鏈接】react-day-pickerDayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.項目地址https://gitcode.com/gh_mirrors/re/react-day-picker點(diǎn)擊查看免費(fèi)下載相關(guān)推薦daypicker/react v10 API 全解析從 DayPicker 組件到類型系統(tǒng)的完整指南daypicker/react v10 API 全解析從 DayPicker 組件到類型系統(tǒng)的完整指南 本文以 react day picker 倉庫中 aUI組件前端React DayPicker v8 DayModifiers 類型詳解自定義日期修飾器的聲明與實(shí)戰(zhàn)用法React DayPicker v8 DayModifiers 類型詳解自定義日期修飾器的聲明與實(shí)戰(zhàn)用法 導(dǎo)讀 本文圍繞 React DayPicker v8UI組件前端30 分鐘出 EFIOpCore Simplify 生成 OpenCore EFI 配置的完整路徑30 分鐘出 EFIOpCore Simplify 生成 OpenCore EFI 配置的完整路徑 OpCore Simplify 是一款 Python 寫的UI組件前端上一篇如何快速解決Mac過熱問題smcFanControl風(fēng)扇控制完整指南下一篇終極指南apt-offline離線包管理工具完整教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 從 `string` 到修飾器系統(tǒng)：理解 React DayPicker 的 Modifier 類型
UI組件前端【免費(fèi)下載鏈接】react-day-pickerDayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.項目地址https://gitcode.com/gh_mirrors/re/react-day-picker點(diǎn)擊查看免費(fèi)下載DayPicker 用Modifier修飾器來表示日歷中一個日期的不同樣式或狀態(tài)。這個類型別名在 src/types/Modifiers.ts 中定義為string。本文將從這一看似簡單的定義出發(fā)拆解 DayPicker 修飾器系統(tǒng)的完整設(shè)計內(nèi)部修飾器如selected、disabled、today、自定義修飾器modifiersprop、修飾器的匹配與傳播以及如何在樣式和可訪問性中使用它們。注意本文內(nèi)容基于倉庫中 version-8.10.2 版本的 API 文檔。版本 9 及更高版本對修飾器 API 做了一些調(diào)整例如modifiersClassNames被重構(gòu)本文的代碼示例均以 8.10.2 為準(zhǔn)。Modifier的定義Modifier:string一個modifier修飾器代表日歷中顯示的一個日期的不同樣式或狀態(tài)。它本身就是一個字符串用作修飾器名稱modifier name這些字符串是修飾器映射modifier map中的鍵key控制 DayPicker 如何表現(xiàn)和顯示日期。源碼中它的定義位于 src/types/Modifiers.ts:9// 邏輯定義type Modifier string雖然類型簡單但它支撐起整個修飾器系統(tǒng)——多個復(fù)合類型都以它為鍵類型別名定義說明DayModifiersRecordModifier, Matcher \| Matcher[]通過modifiersprop 傳入的自定義修飾器CustomModifiersRecordModifier, Matcher[]自定義修飾器的映射值只能是Matcher數(shù)組ActiveModifiersRecordModifier, true PartialRecordInternalModifier, true與某個日期匹配的修飾器集合這些類型都圍繞同一個概念修飾器名稱Modifier字符串→ 匹配規(guī)則Matcher或匹配結(jié)果true。內(nèi)部修飾器DayPicker 內(nèi)置了一組內(nèi)部修飾器其名稱由 InternalModifier 枚舉 定義枚舉成員值說明Disableddisabled通過disabledprop 應(yīng)用到被禁用日期的修飾器Hiddenhidden通過hiddenprop 應(yīng)用到被隱藏日期的修飾器Outsideoutside應(yīng)用于當(dāng)前顯示月份之外的日期外部日期RangeEndrange_end范圍選擇模式下應(yīng)用于所選范圍的結(jié)束日RangeMiddlerange_middle范圍選擇模式下應(yīng)用于所選范圍的中間日RangeStartrange_start范圍選擇模式下應(yīng)用于所選范圍的開始日Selectedselected通過selectedprop 應(yīng)用到被選中日期的修飾器Todaytoday通過todayprop 應(yīng)用到指定日期的修飾器這些內(nèi)部修飾器在 DayPickerBase 接口中通過對應(yīng) props 配置disabled?: Matcher | Matcher[]將disabled修飾器應(yīng)用到匹配的日期。hidden?: Matcher | Matcher[]將hidden修飾器應(yīng)用到匹配的日期并將其從日歷中隱藏。selected?: Matcher | Matcher[]將selected修飾器應(yīng)用到匹配的日期。today?: Date設(shè)置“今天”的日期默認(rèn)是當(dāng)前日期該日期會獲得today修飾器。例如選中 2024 年 10 月 1 日并禁用 2024 年 10 月 15 日DayPicker selected{new Date(2024, 9, 1)} disabled{new Date(2024, 9, 15)} /匹配邏輯isMatch修飾器名稱是如何被應(yīng)用到具體日期上的關(guān)鍵在于 isMatch 函數(shù)其源碼位于 src/contexts/Modifiers/utils/isMatch.ts。它接受一個日期和一個Matcher數(shù)組返回該日期是否匹配任何一個匹配器。匹配器Matcher可以是一個日期、一個日期范圍{from, to}、一個星期幾{dayOfWeek}、一個布爾函數(shù)或任意組合。這也是 DayPicker 能支持 禁用日期、范圍選擇 等功能的基礎(chǔ)。自定義修飾器modifiers prop除了內(nèi)部修飾器DayPicker 還允許通過modifiersprop 定義自定義修飾器。modifiers的類型是 DayModifiersRecordModifier, Matcher | Matcher[]也就是一個從修飾器名稱映射到匹配規(guī)則的記錄。import { DayPicker } from react-day-picker; export function App() { return ( DayPicker modifiers{{ weekend: { dayOfWeek: [0, 6] }, // 匹配周六和周日 holiday: new Date(2024, 9, 1), // 匹配特定日期 past: { before: new Date() }, // 匹配所有過去的日期 }} / ); }自定義修飾器也可以與內(nèi)置修飾器組合使用例如先禁用一部分日期、再對它們應(yīng)用自定義樣式DayPicker disabled{{ before: new Date() }} modifiersClassNames{{ disabled: my-disabled-day, holiday: my-holiday-day, }} /CustomModifiers 與DayModifiers的區(qū)別在于它只接受Matcher數(shù)組RecordModifier, Matcher[]。修飾器的匹配結(jié)果ActiveModifiers當(dāng) DayPicker 渲染每個日期時會計算出該日期匹配的所有修飾器生成一個ActiveModifiers對象src/types/Modifiers.tsconst activeModifiers: ActiveModifiers { selected: true, customModifier: true };這是一個RecordModifier, true與PartialRecordInternalModifier, true的交叉類型。它的鍵就是匹配上的修飾器名稱Modifier值固定為true。在自定義DayContent或DayButton中你可以通過 useActiveModifiers hook 獲取某個日期的活動修飾器import { useActiveModifiers } from react-day-picker; function MyDayContent({ date, displayMonth }) { const activeModifiers useActiveModifiers(date, displayMonth); // activeModifiers.selected true 表示該日期被選中 return div{date.getDate()}/div; }修飾器驅(qū)動的樣式與類名修飾器最主要的用途之一是驅(qū)動樣式。DayPicker 8.x 提供兩種方式modifiersClassNamesRecordstring, string為匹配某修飾器的日期元素指定 CSS 類名。modifiersStylesRecordstring, CSSProperties為匹配某修飾器的日期元素指定內(nèi)聯(lián)樣式。DayPicker modifiers{{ weekend: { dayOfWeek: [0, 6] } }} modifiersClassNames{{ weekend: weekend-day }} modifiersStyles{{ weekend: { color: red } }} /在底層getStyleForModifiers 等輔助函數(shù)負(fù)責(zé)把匹配到的修飾器轉(zhuǎn)換成最終的樣式/類名。你可以在 getStyleForModifiers.test.ts 和 createGetModifiers.test.ts 中看到對應(yīng)的測試用例例如如何為單個日期同時應(yīng)用多個修飾器樣式。修飾器的計算與傳播每個日期的完整修飾器集合由 createGetModifiers 計算在 DayPicker.tsx:199 中調(diào)用它合并了兩部分內(nèi)部修飾器InternalModifier根據(jù)selected、disabled、hidden、today、范圍選擇狀態(tài)等 props 自動計算自定義修飾器DayModifiers來自modifiersprop。結(jié)果通過 DayPickerContext 提供給各個子組件day 按鈕、day 內(nèi)容等從而統(tǒng)一影響樣式、類名以及可訪問性標(biāo)簽。在可訪問性標(biāo)簽中使用修飾器修飾器還可以驅(qū)動可訪問性文本。labelDayButton 的測試展示了如何根據(jù)修飾器如selected、disabled生成日期按鈕的aria-label讓屏幕閱讀器用戶能夠了解日期的狀態(tài)const dayModifiers: Modifiers { selected: true, disabled: false }; // 生成類似 2024 年 10 月 1 日已選中 的標(biāo)簽這也是 DayPicker 在 可訪問性指南 中承諾的基礎(chǔ)之一?？偨Y(jié)Modifier類型雖然只是一個string卻是 DayPicker 修飾器系統(tǒng)的“膠水”它作為修飾器名稱modifier name把Modifier → Matcher → 匹配結(jié)果 → 樣式/標(biāo)簽這條鏈路串起來。理解了它你就理解了 DayPicker 如何通過selected、disabled、hidden、today等內(nèi)部修飾器和modifiers自定義修飾器靈活地控制日期的外觀、狀態(tài)與可訪問性。贊分享UI組件前端【免費(fèi)下載鏈接】react-day-pickerDayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.項目地址https://gitcode.com/gh_mirrors/re/react-day-picker點(diǎn)擊查看免費(fèi)下載相關(guān)推薦daypicker/react v10 API 全解析從 DayPicker 組件到類型系統(tǒng)的完整指南daypicker/react v10 API 全解析從 DayPicker 組件到類型系統(tǒng)的完整指南 本文以 react day picker 倉庫中 aUI組件前端React DayPicker v8 DayModifiers 類型詳解自定義日期修飾器的聲明與實(shí)戰(zhàn)用法React DayPicker v8 DayModifiers 類型詳解自定義日期修飾器的聲明與實(shí)戰(zhàn)用法 導(dǎo)讀 本文圍繞 React DayPicker v8UI組件前端30 分鐘出 EFIOpCore Simplify 生成 OpenCore EFI 配置的完整路徑30 分鐘出 EFIOpCore Simplify 生成 OpenCore EFI 配置的完整路徑 OpCore Simplify 是一款 Python 寫的UI組件前端上一篇如何快速解決Mac過熱問題smcFanControl風(fēng)扇控制完整指南下一篇終極指南apt-offline離線包管理工具完整教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考