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

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

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

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

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

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

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

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

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

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

相关推荐
b***748821 分钟前
前端状态系统的时代变革:从本地状态到全局状态,再到智能状态的未来趋势
前端·状态模式
秋氘渔27 分钟前
Vue 3 组合式API中的生命周期钩子函数介绍
前端·javascript·vue.js
拉不动的猪36 分钟前
requestAnimationFrame 与 JS 事件循环:宏任务执行顺序分析
前端·javascript·面试
步步为营DotNet36 分钟前
深度解析C# 11的Required成员:编译期验证保障数据完整性
java·前端·c#
han_36 分钟前
开发提效利器 - 用好Snippets
前端·javascript·visual studio code
mCell1 小时前
为什么在 Agent 时代,我选择了 Bun?
javascript·agent·bun
J船长1 小时前
Firebase CLI 一直关联失败
前端
wuli_滔滔1 小时前
DevUI云控制台实战:多云管理平台前端架构解密
前端·架构·devui·matechat
深耕AI2 小时前
【wordpress系列教程】02 Blocksy主题
运维·服务器·前端
谎言西西里2 小时前
掌握原型链,写出不翻车的 JS 继承
javascript