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

本文完。

相关推荐
吴声子夜歌4 分钟前
小程序——跳转API
服务器·前端·小程序
m0_502724955 分钟前
CSS position 属性的所有取值(2024最新)
前端·css
银河麒麟操作系统8 分钟前
桌面通用(全架构)【IE浏览器内核插件与 Chrome 内核浏览器插件的区别及兼容性分析】技术文章
前端·chrome
大雷神12 分钟前
HarmonyOS APP<玩转React>开源教程二:ArkTS 语言基础
react.js·开源·harmonyos
不知名。。。。。。。。14 分钟前
仿muduo库实现高并发服务器--日志的书写和套接字Socket的实现
前端
夫琅禾费米线17 分钟前
React Hook Form + Zod:优雅构建 React 表单
前端·javascript·react.js·typescript
坐吃山猪21 分钟前
React+TypeScript Agent开发规范
前端·react.js·typescript
①条咸鱼24 分钟前
React 项目运用 RxJS 设置节流
react.js
SuperEugene27 分钟前
Vue3 表格封装实战:列配置 + slot 扩展 + 请求生命周期|Vue生态精选篇
前端·javascript·vue.js·前端框架