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

本文完。

相关推荐
import_random1 分钟前
[python]miniconda(安装)
前端
云梦谭7 分钟前
AI 生成的FreeSWITCH 呼出流程深度分析freeswitch-1.10.12.-release
java·前端·php
一只爱吃糖的小羊10 分钟前
React 19:革命性升级与全面使用指南
react.js
秃了才能变得更强11 分钟前
React Native小技巧
前端
一只爱吃糖的小羊11 分钟前
React 19 vs Vue 3:深度对比与选型指南
前端·vue.js·react.js
我也想好好学习12 分钟前
使用Promise实现串行执行异步任务,含出错重试功能
javascript
前端老宋Running12 分钟前
Vue 3 的“降维打击”:Composition API 是如何让 Mixin 成为历史文物的?
前端·javascript·vue.js
Pluto_CRown13 分钟前
H5 开发的各类小知识点
前端·javascript
Pluto_CRown13 分钟前
上下文存储【下】
前端·javascript
AAA阿giao14 分钟前
JavaScript 中基于原型和原型链的继承方式详解
前端·javascript·面试