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

本文完。

相关推荐
Surplusx几秒前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
摘星编程17 分钟前
React Native for OpenHarmony 实战:DisplayInfo 显示信息详解
android·react native·react.js
小宇的天下22 分钟前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库
LongJ_Sir32 分钟前
Cesium--可拖拽气泡弹窗(Vue3版)
javascript
跟着珅聪学java1 小时前
JavaScript 中定义全局变量的教程
javascript
哈哈你是真的厉害1 小时前
React Native 鸿蒙跨平台开发:FlatList 基础列表代码指南
react native·react.js·harmonyos
一只小bit1 小时前
Qt 文件:QFile 文件读写与管理教程
前端·c++·qt·gui
午安~婉1 小时前
整理知识点
前端·javascript·vue
向前V1 小时前
Flutter for OpenHarmony数独游戏App实战:底部导航栏
javascript·flutter·游戏
人道领域2 小时前
JavaWeb从入门到进阶(javaScript)
开发语言·javascript·ecmascript