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

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

---

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

---

內容

由於 Dropdown 的內容可以非常多樣，所以 Dropdown 的內容物 Menu 會與彈窗本體 Portal 分開。換言之，這一個彈窗內要長什麼樣子，就可以另外撰寫而不會被綁住。

---

參數

isOpen – 是否顯示
isDisabled – 是否禁用
children – 「觸發彈窗」的元件，一般而言會是個按鈕
overlay – 彈窗內容
placement – 彈窗出現位置

---

概念

1. 彈窗內容會使用 Portal 來綁定在 root 上，以避免 z-index 的設置問題。
2. 若要偵測當「使用者點擊菜單以外部分」或是「彈窗元件」就將彈窗內容關閉，可檢查點擊的元件該層和其父層有無相關的 data-attribute。如果沒有的話，就表示不再 Dropdown 的點擊範圍。

---

程式碼

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

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 8
• [筆記] 程式必修課！離散數學與演算法 – 7
• [筆記] 實作動畫 div 移入效果需注意滾軸所造成的影響
• [筆記] 程式必修課！離散數學與演算法 – 6
• [筆記] 程式必修課！離散數學與演算法 – 5