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

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

---

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

---

內容

1. Toast 是一種輕量級的訊息提示方式。預設是會在畫面頂部置中出現一個對話框，並會在一段時間後自動消失。
2. 透過 ReactDom.render() 方法，將目標的 Toast 元件渲染到指定的 <div> 上。因此，需要撰寫生成一個用來掛載 Toast 的 <div>，並在一段時間後將其移除。在 React 18 後，此方法必須改用 createRoot(<DOM位置>).render(<Render 的內容>)
3. 為了方便在 callback 中使用，新增了一個 message 方法，省去每次引入都得自行撰寫一個 Container 元件的困擾

參數

type – 提示訊息的種類
content – 提示訊息內容，一般是純文字
duration – 提示訊息時間，預設為 3 s

---

程式碼

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

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 142
• [筆記] 程式必修課！離散數學與演算法 – 141
• [筆記] 程式必修課！離散數學與演算法 – 140
• [筆記] 程式必修課！離散數學與演算法 – 138
• [筆記] Nuxt2 + Buefy0.X + Axios 升級至 Nuxt4 + Buefy1.X + ofetch