近期為了熟悉元件 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 的點擊範圍。
程式碼
相關文章
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 30 – 佈署發佈
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化，便
