likes
comments
collection
share

SEMI DESIGN 源码学习(五)工具提示

作者站长头像
站长
· 阅读数 67

Toast 组件位于 packages/semi-ui/toast/index.tsx

SEMI DESIGN 源码学习(五)工具提示

文件默认导出一个 ToastList 类,实际项目中使用的是这个 ToastList 类的静态方法 info, warning, error, success

SEMI DESIGN 源码学习(五)工具提示

而他们是由 create 方法创建,这个方法判断页面中是否有 ToastList 组件,没有则新建一个 ToastList,否则直接在现有 ToastList 添加元素。

SEMI DESIGN 源码学习(五)工具提示

添加,删除,更新这些操作使用 foundation 进行,这个 foundation 属性是 ToastList 的核心。

SEMI DESIGN 源码学习(五)工具提示

在构造器方法看到 foundation 属性是一个接受一个 adapterToastListFoundation 实例,需要看看这个 ToastListFoundation 是啥。

SEMI DESIGN 源码学习(五)工具提示

ToastListFoundation 实际上维护的是数组 ToastList.state.list

SEMI DESIGN 源码学习(五)工具提示

通过 addupdate 方法添加和更新 toastOpts

SEMI DESIGN 源码学习(五)工具提示

最后这个数组的数据用于 ToastListrender 方法渲染每一个 Toast

SEMI DESIGN 源码学习(五)工具提示

本文完。

转载自:https://juejin.cn/post/7284678650200031247
评论
请登录