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

本文完。

相关推荐
0思必得010 分钟前
[Web自动化] Selenium处理Cookie
前端·爬虫·python·selenium·自动化
徐同保19 分钟前
react-markdown使用
前端·react.js·前端框架
2601_9498574326 分钟前
Flutter for OpenHarmony Web开发助手App实战:CSS参考
前端·css·flutter
无法长大26 分钟前
如何判断项目需不需要用、能不能用Tailwind CSS
前端·css·vue.js·elementui·vue3·tailwind css
橙露28 分钟前
移动端前端适配:Rem、VW/VH 与媒体查询的综合应用指南
前端·媒体
GGGG寄了44 分钟前
CSS——CSS引入方式+选择器类型
前端·css·html
●VON1 小时前
React Native for OpenHarmony:猜数字游戏完整技术实现文档
学习·react native·react.js·游戏·开源鸿蒙·von
墨染青竹梦悠然1 小时前
基于Django+vue的图书借阅管理系统
前端·vue.js·后端·python·django·毕业设计·毕设
码农六六1 小时前
js函数柯里化
开发语言·前端·javascript