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

本文完。

相关推荐
韭菜炒大葱3 分钟前
详解:useMemo 和useCallback
前端·react.js·面试
ZC跨境爬虫20 分钟前
跟着 MDN 学 HTML day_62:(HTML调试与常见错误修复指南)
java·前端·javascript·ui·html·媒体
REDcker29 分钟前
Playwright详解 Web自动化与E2E测试 架构原理与实战入门
前端·架构·自动化
用户860225046747240 分钟前
从入门到进阶的 React Native 实战指南
android·前端
贵州数擎科技有限公司41 分钟前
雨滴特效的 Three.js 实现
前端·three.js
问心无愧051341 分钟前
ctf show web入门98
android·前端·笔记
irving同学4623841 分钟前
Drizzle ORM + PostgreSQL + Hono 学习笔记
前端·后端
明豆41 分钟前
HTTPS / TLS 1.3 深度解析 — Web 安全传输协议生产实战
前端·安全·https
Linsk42 分钟前
Rollup 官方插件 @rollup/plugin-inject 详解
前端·rollup.js·前端工程化
2601_9584925543 分钟前
Performance Audit of Paper Boats Racing - HTML5 Racing Game
前端·html·html5