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

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

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

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

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

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

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

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

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

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

相关推荐
Swift社区16 小时前
React 项目生产环境构建与静态资源优化
前端·react.js·前端框架
ZaneAI16 小时前
🚀 Vercel AI SDK 使用指南: 子代理 (Subagents)
react.js·agent
A小码哥16 小时前
基于 Trae + 国产 GLM-4.7模型的任务驱动式软件开发实践
前端
上海合宙LuatOS16 小时前
LuatOS核心库API——【fft 】 快速傅里叶变换
java·前端·人工智能·单片机·嵌入式硬件·物联网·机器学习
瑶瑶领先_16 小时前
react - isValidElement 判断参数是否是一个有效的ReactElement
前端
瑶瑶领先_16 小时前
js 数字精确度
前端
瑶瑶领先_16 小时前
图片标签拖拽 && url、base64、Blob、File、canvas之间相互转换
前端
感性的程序员小王17 小时前
我做了个 AI + 实时协作 的 draw.io,免费开源!!
前端·后端
_周游17 小时前
Java8 API文档搜索引擎_7.项目优化之权重合并
java·开发语言·前端·搜索引擎·intellij-idea
木斯佳17 小时前
前端八股文面经大全:2026-02-09快手春招前端一面
前端·状态模式