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

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

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

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

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

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

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

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

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

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

相关推荐
王林不想说话22 分钟前
ES6 到 ES2026 全面进阶指南:新特性、原理、示例与工程落地
前端·javascript·面试
用户435237138149325 分钟前
🚀 Vue3 + TypeScript 学习笔记:从泛型 T 到 Promise<T>,终于搞懂了 keyof 和 typeof
前端
跟着群主去吃肉26 分钟前
Cinemachine的应用-第三人称视角
前端·unity3d·游戏开发
东方小月26 分钟前
从零开发一个 Coding Agent(十):实现 CLI 参数解析与静态命令
前端·人工智能·开源
阿黎梨梨27 分钟前
Next.js 全栈开发:从 SPA 的痛点到 SSR 的破局之道
前端·后端
沐道PHP28 分钟前
CRMEB多店版diy装修位置偏移修复
前端
WZzz29 分钟前
JavaScript 中 this 的「指向」完整教程
javascript
犀利的毛豆豆35 分钟前
useCallback
前端
犀利的毛豆豆37 分钟前
React.memo和useCallback组合使用
前端
mONESY39 分钟前
浏览器里跑 DeepSeek-R1,这份 worker.js 到底写了什么
javascript