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

本文完。

相关推荐
GISer_Jing7 分钟前
跨境营销前端AI应用业务领域
前端·人工智能·aigc
oak隔壁找我14 分钟前
Node.js的package.json
前端·javascript
talenteddriver18 分钟前
web: http请求(自用总结)
前端·网络协议·http
全栈派森21 分钟前
Flutter 实战:基于 GetX + Obx 的企业级架构设计指南
前端·flutter
Awu122730 分钟前
Vue3自定义渲染器:原理剖析与实践指南
前端·vue.js·three.js
玉宇夕落33 分钟前
从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化
react.js
支撑前端荣耀34 分钟前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
进击的野人34 分钟前
Vue.js 插槽机制深度解析:从基础使用到高级应用
前端·vue.js·前端框架
3秒一个大35 分钟前
React 父子组件数据传递:机制与意义解析
react.js
重铸码农荣光38 分钟前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构