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

本文完。

相关推荐
魔术师卡颂2 分钟前
提问量暴跌 80% ,Stack Overflow 却赚翻了?
前端·后端·ai编程
rocky1913 分钟前
什么,你还没用 claude,out 了吧!
前端·程序员
冰暮流星9 分钟前
javascript如何转换为字符串与布尔型
java·开发语言·javascript
2501_9481226317 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 个人中心页面
javascript·react native·react.js·游戏·ecmascript·harmonyos
Younglina19 分钟前
想提升专注力?我做了一个web端的训练工具
前端·vue.js·游戏
NEXT0636 分钟前
CSS 选择器深度实战:从“个十百千”权重法到零 DOM 动画的降维打击
前端·css
Mapmost41 分钟前
防患未“燃”:掌握森林火灾仿真分析,精准把控火势蔓延趋势
前端
半世轮回半世寻44 分钟前
前端开发里最常用的5种本地存储
前端·javascript
OpenTiny社区1 小时前
TinyPro v1.4.0 正式发布:支持 Spring Boot、移动端适配、新增卡片列表和高级表单页面
java·前端·spring boot·后端·开源·opentiny
爱上妖精的尾巴1 小时前
7-9 WPS JS宏 对象使用实例6:按条件读取多表再拆成多表
前端·javascript·wps·jsa