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

本文完。

相关推荐
阿鑫_99614 小时前
通用-ESLint+Prettier基础知识
前端·后端
ai超级个体14 小时前
金三银四,一个面试官连连夸赞的个人网页技术分享
前端·面试·three.js·threejs·网页设计·网页灵感·网页分享
Oneslide14 小时前
块级元素竖向堆叠且宽度默认会撑满其父容器的可用宽度
前端
i建模14 小时前
npm使用大全
前端·npm·node.js
李剑一14 小时前
Cesium 实现园区水景!3 种水面效果,Water 材质 5 分钟搞定
前端·vue.js·cesium
心.c14 小时前
从 ReAct 到 Plan-and-Execute:AI Agent 推理架构的理解与选择
人工智能·react.js·架构
kgduu15 小时前
js之错误处理
开发语言·前端·javascript
德莱厄斯15 小时前
Milkup 技术内幕:一个 Typora 风格的即时渲染 Markdown 编辑器是怎样炼成的
前端·javascript·markdown
Mintopia15 小时前
架构师的心胸:把分歧装进系统,把人放在方案前
前端·架构
亿元程序员15 小时前
不是说现在AI很牛吗,怎么连个高光Shader效果都写不好?
前端