SEMI DESIGN 源码学习(六)轮播图

轮播图代码位于 packages/semi-ui/carousel/index.tsx,代码量不多。

核心同样是这个 foundation 属性,类型为 CarouselFoundation

CarouselFoundation 封装了轮播图的操作方法,通过传入的 adapter,管理轮播图组件的 state

adapter 目的是操作组件的 state 属性。

组件暴露的方法实际上调用的是 foundation 的方法。

renderChildren 方法渲染传给轮播图组件的子元素。

renderIndicator, renderArrow 分别渲染指示器和切换箭头。

最后 render 方法返回一个 div 容器,包裹整个组件。

本文完,下期详细解释这个 foundation 模式。

相关推荐
by————组态1 分钟前
睿控(Ricon)组态
运维·前端·物联网·信息可视化·组态·组态软件
蓁蓁啊2 分钟前
GCC 头文件搜索路径:-I vs -idirafter 深度解析
java·前端·javascript·嵌入式硬件·物联网
依赖_赖3 分钟前
前端实现token无感刷新
前端·javascript·vue.js
RubyZhang9 分钟前
小程序Canvas动态海报生成方案及性能优化报告
前端
zhelingwang23 分钟前
设计模式笔记
前端
Focus_26 分钟前
如何借助AI在UE5中将图片批量生成3D模型
前端·aigc·游戏开发
m0_7482523830 分钟前
JavaScript 基本语法
开发语言·javascript·ecmascript
hhcccchh1 小时前
学习vue第十三天 Vue3组件深入指南:组件的艺术与科学
javascript·vue.js·学习
@PHARAOH1 小时前
WHAT - Vercel react-best-practices 系列(二)
前端·javascript·react.js
qq_406176141 小时前
深入理解 JavaScript 闭包:从原理到实战避坑
开发语言·前端·javascript