[筆記] 哎呀！不小心刻了一套 React UI 元件庫 2 – Switch

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Switch 開關元件的重點。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

Switch 元件

1. Switch 在觸發時，狀態就會改變，而 Checkbox 則會需要送出後才會生效
2. 屬性
   1. checked：布林值，決定按鈕的開關狀態
   2. 事件屬性：看改寫的原生元素為何。若是用 checkbox 則是 onChange；button 則是 onClick
   3. disabled：布林值，禁用。視情況可以在上頭補上 loading 的狀態
   4. 顏色
   5. 開啟狀態的文字
   6. 關閉狀態的文字
3. Thumb 是指圓圓的 Icon，Label
4. 當 isDisabled 有變化時，就需要重新計算開關內的 Label 長度，因此會需要 useLayoutEffect
5. 使用 useLayoutEffect 的原因是： labelRef?.current?.clientWidth 的值是在「畫面進行 Repaint 」前執行。若使用 useEffect 會導致縱使 clientWidth 的長度不正確，一樣進行渲染後再調整。換言之，你會有過多無謂的渲染結果。 https://www.explainthis.io/zh-hant/swe/use-effect-vs-use-layout-effect
6. isDisabled 時，cursor 需要變化，且會調整顏色或是透明度來讓使用者知道狀態已經改變了

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/76e23d7d7b27267751febe52cfb3119e5d3f30d2

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 88
• [筆記] 程式必修課！離散數學與演算法 – 86
• [筆記] 程式必修課！離散數學與演算法 – 84
• [筆記] 程式必修課！離散數學與演算法 – 83
• [筆記] 解決 Nuxt3 SSG 靜態網站生成過多 js 檔的問題