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

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

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

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

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

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

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

通过 add 和 update 方法添加和更新 toastOpts

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

本文完。

相关推荐
修炼的dance7 小时前
OCR预处理测了108组,纠斜去噪有用,坑在顺序和力度
前端
独隅7 小时前
WebStorm Windows 版 React / Next.js 实战替换指南
javascript·windows·webstorm
冷眸_7 小时前
同名食材不能直接相减:一个 JavaScript 用量模型的边界
javascript
不可能片场7 小时前
AI视频成片 帧间差分把拼接缝照出来
前端·electron
写的都是BUG7 小时前
APK 里的钥匙,一直就放在门口:聊聊加固真正该做什么
前端·算法
dpharness7 小时前
我踩过的四个记忆坑,从预算到换机
前端·后端
apollo_qwe7 小时前
接口超时了,前端为什么不能直接重试?
javascript·http
用户7783366132117 小时前
SerpBase驱动:用原生JS实现搜索意图分流浮层
前端
阿明的小蝴蝶7 小时前
设备出厂横竖屏修改 & 默认手势导航修改(按键导航)
前端
SameX7 小时前
ArkTS 做应用内"快捷胶囊" —— 续航日记踩过的两个鸿蒙声明式 UI workaround
前端