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

本文完。

相关推荐
金融小白数据分析之路22 分钟前
绍兴市镇街echarts 制作
前端·数据库·echarts
Slice_cy1 小时前
Mint 自研框架设计与实现:从重复开发走向配置驱动(二)
前端·后端·架构
greenbbLV1 小时前
积分兑换商城供应商挑选:避坑要点与靠谱选择解析
前端·小程序
张元清1 小时前
React useDropZone Hook:搭建一个文件拖放区(2026)
javascript·react.js
a1117761 小时前
3D 建筑编辑器 Pascal Editor THreeJS 开源
前端·3d·html
jason_yang1 小时前
写给女儿的英语App
前端·人工智能
思码梁田1 小时前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
勇往直前plus1 小时前
Vite :从双击 HTML 到现代前端开发
前端·html
muddjsv2 小时前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
HH‘HH2 小时前
前端应用的离线暂停更新策略:原理、实现与最佳实践
开发语言·前端·php