SEMI DESIGN 源码学习(五)工具提示

Toast 组件位于 packages/semi-ui/toast/index.tsx

文件默认导出一个 ToastList 类,实际项目中使用的是这个 ToastList 类的静态方法 info, warning, error, success

而他们是由 create 方法创建,这个方法判断页面中是否有 ToastList 组件,没有则新建一个 ToastList,否则直接在现有 ToastList 添加元素。

添加,删除,更新这些操作使用 foundation 进行,这个 foundation 属性是 ToastList 的核心。

在构造器方法看到 foundation 属性是一个接受一个 adapterToastListFoundation 实例,需要看看这个 ToastListFoundation 是啥。

ToastListFoundation 实际上维护的是数组 ToastList.state.list

通过 addupdate 方法添加和更新 toastOpts

最后这个数组的数据用于 ToastListrender 方法渲染每一个 Toast

本文完。

相关推荐
aiguangyuan19 小时前
React 18 源码解读(一)
javascript·react·前端开发
LFly_ice19 小时前
学习React-23-React-router
前端·学习·react.js
haofafa19 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
我叫张小白。19 小时前
TypeScript对象类型与接口:构建复杂数据结构
前端·javascript·typescript
O***p60419 小时前
JavaScript增强现实开发
开发语言·javascript·ar
墨客希19 小时前
如何快速掌握大型Vue项目
前端·javascript·vue.js
大福ya20 小时前
AI开源项目改造NextChat(ChatGPT-Next-Web)实现前端SSR改造打造一个初始框架
前端·chatgpt·前端框架·开源·aigc·reactjs·ai编程
samroom20 小时前
langchain+ollama+Next.js实现AI对话聊天框
javascript·人工智能·langchain
n***333520 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
纯粹的热爱20 小时前
🌐 阿里云 Linux 服务器 Let's Encrypt 免费 SSL 证书完整部署指南
前端