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

本文完。

相关推荐
Sailing4 分钟前
🔥 React 高频 useEffect 导致页面崩溃的真实案例:从根因排查到彻底优化
前端·react.js·面试
aduzhe5 分钟前
关于在嵌入式中打印float类型遇到的bug
前端·javascript·bug
Sailing6 分钟前
🔥 大模型时代最讽刺的职业出现了:“大模型善后工程师”
前端·openai·ai编程
o***Z44810 分钟前
前端组件表单验证,React Hook Form与VeeValidate
前端·react.js·前端框架
xiaoxue..19 分钟前
Vibe Coding之道:从Hulk扩展程序看Prompt工程的艺术
前端·人工智能·prompt·aigc
程序猿小蒜25 分钟前
基于springboot的汽车资讯网站开发与实现
java·前端·spring boot·后端·spring
q***985227 分钟前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
鹏多多32 分钟前
vue过滤器filter的详解及和computed的区别
前端·javascript·vue.js
Mintopia32 分钟前
🚀 Trae 国际版 Max 模型升级:算力与智能的共舞
前端·人工智能·trae
孟陬33 分钟前
在浏览器控制台中优雅地安装 npm 包 console.install('lodash')
javascript·node.js