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

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

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

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

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

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

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

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

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

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

相关推荐
hellokatewj28 分钟前
React Hooks 全解:原理、API 与应用场景
前端·javascript·react.js
袋鱼不重35 分钟前
保姆级教程:让 Cursor 编辑器突破地区限制,正常调用大模型(附配置 + 截图)
前端·后端·cursor
bieao36 分钟前
Vite+Antd+Micro-app中iframe模式下样式闪烁的问题
前端
zhouzhouya40 分钟前
码上星辰,人间烟火:我的2025
前端·程序员·代码规范
江湖yi山人40 分钟前
生产环境的log,上传到开发者的本地服务器
javascript·python
彭涛3611 小时前
什么是MessageChannel
前端
嘉琪0011 小时前
provide 和 inject的理解?
前端·javascript·vue.js
匆叔1 小时前
ESLint,前端项目CTRL+S,自动保存格式化文档,超细
前端
满天星辰1 小时前
Vue3响应式API-reactive的原理
前端·vue.js
XiaoYu20021 小时前
第10章 SSE魔改
前端·webassembly