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

本文完。

相关推荐
Komorebi_99993 小时前
LangChain Day5 课程:Agent 智能代理
前端·langchain·大模型
七牛云行业应用3 小时前
别等了!xAI 的终端编码 Agent 来了——Grok Build 0.1 安装到并行 Agent全流程
前端
Asmewill3 小时前
LangGraph学习笔记三(State)
前端
kisshyshy3 小时前
# 🔥 数组去重:从双重循环到 Set,面试官想听什么?
javascript·面试
史前码农JH3 小时前
nodejs项目Monorepo模式的基础操作
前端
RD_daoyi3 小时前
Google 网站收录全流程解析:抓取、索引与排名机制详解
前端·javascript·人工智能·学习·搜索引擎·html
@大迁世界4 小时前
AI还替不了的JS能力
开发语言·前端·javascript·人工智能·ecmascript
相忘于江湖4265434 小时前
vs code 代码保存自动格式化
前端·vue
暗冰ཏོ4 小时前
2026前端开发资源整理大全:从基础学习到工程化实战的完整导航
前端·javascript·css·前端框架·html
前端小D4 小时前
网页渲染过程
前端