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 分钟前
VTJ:核心引擎
前端·低代码·ai编程
GISer_Jing24 分钟前
AI时代前端开发者成长计划
前端·人工智能
方安乐26 分钟前
网页设计:自动适配浏览器深色/浅色模式
前端·html5
qq_120840937129 分钟前
Three.js 工程向:后处理性能预算与多 Pass 链路优化
前端·javascript
南棱笑笑生34 分钟前
20260422给万象奥科的开发板HD-RK3576-PI适配瑞芯微原厂的Buildroot时使用mpg123播放mp3音频
前端·javascript·音视频·rockchip
小小码农Come on1 小时前
QPainter双缓冲区实现一个简单画图软件
linux·服务器·前端
nunumaymax1 小时前
【第三章-react 应用(基于 react 脚手架)】
前端·react.js·前端框架
空中海1 小时前
第一章:Vue 基础与模板语法
前端·javascript·vue.js
mCell1 小时前
为什么我不建议初学者一上来就用框架学 Agent
javascript·langchain·agent