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

本文完。

相关推荐
web守墓人2 小时前
【linux】Mubuntu v1.0.11更新日志
linux·前端
遇见你...5 小时前
TypeScript
前端·javascript·typescript
Highcharts.js5 小时前
Highcharts Grid 中文站正式上线:表格数据处理的全新选择
前端·javascript·数据库·表格数据·highcharts·可视化图表·企业级图表
阿正的梦工坊8 小时前
JavaScript 微任务与宏任务完全指南
开发语言·javascript·ecmascript
懂懂tty8 小时前
CRA 迁移 Rspack(实战)
前端·架构
小码哥_常9 小时前
Kotlin 助力 Android 启动“大提速”
前端
GreenTea10 小时前
AI 时代,工程师的不可替代性在哪里
前端·人工智能·后端
Jagger_10 小时前
能不能别再弄低代码害人了
前端
朦胧之10 小时前
AI 编程开发思维
前端·后端·ai编程
踩着两条虫11 小时前
VTJ:快速开始
前端·低代码·架构