[筆記] 哎呀！不小心刻了一套 React UI 元件庫 13 – Accordion/Collapse

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

---

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

---

內容

1. Accordion 是指單一的區塊，會搭配 AccordionGroup 一起使用。實作上會先做 Accordion
2. 過場動畫會在 AccordionPanel 區塊搭配 CSS。利用元素的本身的 scrollHeight 當作高度最大值，再搭配 transition 與 boolean 值的搭配來改變

---

參數

1. isExpand 這個變數會是 Accordion 內部的狀態，用 useState 來管理，並對其內的 Header 和 Panel 進行控制
2. onClick 方法會需要接收兩種傳入：在手風琴模式下，用外部 Group 的 onClick，否則就呼叫 Accordion 內部的函式就好
3. 內容都是寫在 children

---

程式碼

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

---

相關文章

按讚加入粉絲團

延伸閱讀

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