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

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

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

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

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

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

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

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

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

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

相关推荐
哈哈你是真的厉害12 小时前
小白基础入门 React Native 鸿蒙跨平台开发:实现一个简单的文件路径处理工具
react native·react.js·harmonyos
GIS之路13 小时前
GDAL 实现影像裁剪
前端·python·arcgis·信息可视化
AGMTI13 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript
不会Android的潘潘13 小时前
受限系统环境下的 WebView 能力演进:车载平台 Web 渲染异常的根因分析与优化实践
android·java·前端·aosp
建军啊13 小时前
java web常见lou洞
android·java·前端
阳无13 小时前
宝塔部署的前后端项目从IP访问改成自定义域名访问
java·前端·部署
哈哈你是真的厉害13 小时前
小白基础入门 React Native 鸿蒙跨平台开发:实现一个简单的个人所得税计算器
react native·react.js·harmonyos
Galloping-Vijay13 小时前
解决 WSL2 + Windows Hosts + 开启 VPN 后无法访问本地 Web 服务的问题
前端·windows
不吃香菜的猪13 小时前
使用@vue-office/pdf时,pdf展示不全
javascript·vue.js·pdf
wuhen_n13 小时前
TypeScript的对象类型:interface vs type
前端·javascript·typescript