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

Radio 和 Checkbox 的選項部分是類似的，差別在於前者需要有群組處理單選，後者每一個都可以是獨立狀態。此篇先由 Radio 和 RadioGroup 開始。

---

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

---

內容

Option

實務上，先做共用的 Option 部分。參數如下

1. isChecked
2. isDisabled
3. themeColor – 顏色選項
4. checkedIcon – 有內建預設值，當然也可以自行傳入
5. unCheckedIcon – 有內建預設值，當然也可以自行傳入
6. value – 這個值是要綁到選項上，這樣才可以取得值

---

RadioGroup

RadioGroup 的參數如下

1. value – 取得最後選取的值
2. children – 這個是放 ReactNode，也就是包在其內的 Option 選項
3. columns – 排版用，採用 display: grid
4. onChange – 當有勾選變化時，要如何寫入

---

RadioGroup 元件的邏輯

1. 用 React.children 取得 ReactNode 的數量，並藉此使用 .map 方法來遍歷。
2. 每一個遍歷到的 ReactNode，用 cloneElement 保留 ref 並藉機修改樣式。最後會回傳一個帶有修改的淺拷貝 Node

---

程式碼

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

---

相關文章

---

Reference

1. https://www.fullstackbb.com/react/when-to-use-react-cloneelement/

按讚加入粉絲團

延伸閱讀

• [筆記] 瀏覽器的跳轉處理之 location.href 和 location.replace
• [筆記] Vite 導入 Exceljs 輸出簡易表格
• [筆記] 程式必修課！離散數學與演算法 – 22
• [筆記] 程式必修課！離散數學與演算法 – 21
• [筆記] Vue3 實作類似 Checkbox 的 Radio 元件