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

本文完。

相关推荐
alphardex8 小时前
一个普通魔法师的 2025 年度总结
前端·年终总结
德莱厄斯8 小时前
AI 纪元 3 年,2025 论前端程序员自救
前端·ai编程·vibecoding
WX-bisheyuange8 小时前
基于Spring Boot的社团管理系统的设计与实现
前端·javascript·vue.js·毕业设计
橙某人8 小时前
LogicFlow 插件魔改实录:手把手教你重写动态分组(DynamicGroup)🛠️
前端·javascript·vue.js
阿蔹8 小时前
UI测试自动化-Web-Python-Selenium-2-元素操作、浏览器操作
前端·python·selenium·ui·自动化
2501_944446008 小时前
Flutter&OpenHarmony状态管理方案详解
开发语言·javascript·flutter
T_Donna8 小时前
【问题解决】react native: cli.init is not a function
javascript·react native·react.js
谎言西西里9 小时前
React hooks 之 一篇文章掌握 useState 和 useEffect 的核心机制
前端·react.js
qx099 小时前
html中使用vue3+elementplus
javascript·vue.js·html
Apifox.9 小时前
Apifox 12 月更新| AI 生成用例同步生成测试数据、接口文档完整性检测、设计 SSE 流式接口、从 Git 仓库导入数据
前端·人工智能·git·ai·postman·团队开发