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

本文完。

相关推荐
渐儿几秒前
Electron 实操开发文档
前端
小则又沐风a2 分钟前
深入了解进程概念 第二章
java·linux·服务器·前端
亲亲小宝宝鸭2 分钟前
微前端方案探索:qiankun
前端·微服务
渐儿2 分钟前
跨端框架实操开发文档:Electron / Tauri / React Native
前端
ZC跨境爬虫6 分钟前
跟着 MDN 学 HTML day_60:(表单与按钮技能测试实战)
服务器·前端·javascript·数据库·ui·html
lihaozecq6 分钟前
做 Agent SDK 必须支持的插件能力:8 个钩子搞定横切关注点
前端·agent·ai编程
秦歌66616 分钟前
Agent Skills详解
服务器·前端·数据库
ljt272496066116 分钟前
Vue笔记(四)--组件基础
前端·vue.js·笔记
哈撒Ki17 分钟前
快速入门WebSocket
前端·websocket
张元清17 分钟前
React 里不用 setTimeout 的计时器写法:useTimeout、useInterval、useCountDown 和 useRafFn
前端·javascript·面试