SEMI DESIGN 源码学习(五)工具提示

Toast 组件位于 packages/semi-ui/toast/index.tsx

文件默认导出一个 ToastList 类,实际项目中使用的是这个 ToastList 类的静态方法 info, warning, error, success

而他们是由 create 方法创建,这个方法判断页面中是否有 ToastList 组件,没有则新建一个 ToastList,否则直接在现有 ToastList 添加元素。

添加,删除,更新这些操作使用 foundation 进行,这个 foundation 属性是 ToastList 的核心。

在构造器方法看到 foundation 属性是一个接受一个 adapter 的 ToastListFoundation 实例,需要看看这个 ToastListFoundation 是啥。

ToastListFoundation 实际上维护的是数组 ToastList.state.list

通过 add 和 update 方法添加和更新 toastOpts

最后这个数组的数据用于 ToastList 的 render 方法渲染每一个 Toast

本文完。

相关推荐
Penge6661 小时前
JavaScript:BOM 详解
前端
Penge6662 小时前
Vite vs Webpack:前端构建工具原理与实战
前端
Penge6662 小时前
前端包管理工具:npm、Yarn、pnpm 快速入门
前端
Penge6662 小时前
Sass 了解
前端
Penge6663 小时前
Webpack 打包从 0 到 1 实战笔记
前端
Penge6663 小时前
Webpack 入门:是什么、为什么需要、怎么使用?
前端
Penge6663 小时前
Ant Design(Antd)了解
前端
wangruofeng3 小时前
同一行代码,百种渲染:Asuka、React Native 与 Flutter 跨平台渲染机制深度拆解
前端·github
Penge6664 小时前
JavaScript 核心语法速通
前端
wangruofeng5 小时前
写给开发者的〈重构 UI〉实战笔记:从改好一个设置页开始,告别“程序员审美”
前端·aigc