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

本文完。

相关推荐
你好潘先生4 分钟前
让 AI 任务不丢进度:YeeroAI 后台续跑与全局快捷操作实践
前端·人工智能·后端
不好听61311 分钟前
javascript中对象的简单了解
javascript
candyTong18 分钟前
Claude Code 的 Skill 动态发现机制
javascript
小KK_20 分钟前
写给前端小白:我终于搞懂了JS原型和原型链
前端·javascript
烂人文22 分钟前
Codex 走中转站后,手机也能远程控制,Free 账号也能用
前端
Java技术小馆24 分钟前
Claude Code CLI 命令大全:60 个原生命令一次讲清
前端·后端
HjhIron25 分钟前
学习并且总结JavaScript对象
javascript
LCG元44 分钟前
深耕多智能体编排,解锁复杂Agent开发之路
前端·数据库·人工智能
拾年2751 小时前
520刚过,今天来教你怎么"驾驭"别人的对象
前端·javascript