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

本文完。

相关推荐
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_33:(Attr 接口与属性节点的深入理解)
前端·javascript·ui·html·音视频·html5
神所夸赞的夏天1 天前
如何获取多层json数据,存成dictionary,并取最大最小值
java·前端·json
红色的小鳄鱼1 天前
前端面试js手写
开发语言·前端·javascript
焦糖玛奇朵婷1 天前
健身房预约小程序开发、设计
java·大数据·服务器·前端·小程序
上海云盾王帅1 天前
WEB业务如何接入安全防护:从零到一的实战指南
前端·安全
用户059540174461 天前
AI Agent记忆丢失踩坑实录:这个问题让我排查了3天
前端·css
web行路人1 天前
前端对Commands(斜杠命令)一些常用
前端·javascript·vue.js·vue
Rhi6371 天前
第 2 篇|吐槽向:那些年我们配过的环境,这次终于能跑起来了
react.js·github
当时只道寻常1 天前
从零到一打造企业级全栈后台管理系统 —— 技术选型、工程化实践与深度思考
前端·全栈·前端工程化
竹林8181 天前
用 ethers.js 连 MetaMask 做钱包登录,我踩了三个坑才搞定跨页面状态同步
前端·javascript