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

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

react logo


[ 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


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件

Reference

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

按讚加入粉絲團

延伸閱讀