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

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

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

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

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

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

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

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

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

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

相关推荐
得物技术41 分钟前
实战从零开始构建一个Coding Agent:Violin |得物技术
javascript·架构·llm
Highcharts1 小时前
用Highcharts如何动态向一个序列添加点-示列讲解
前端
weixin_431600441 小时前
做 Agent 会用到的 Node API(4):取消与 AbortController
前端·学习·ai·agent·ai编程
JiaLin_Denny1 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
用户2181697049301 小时前
Flutter(十)Container Center Align
前端
无人生还2 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
小p2 小时前
nextjs学习9: Next.js 渲染与缓存
前端·后端
乘风gg2 小时前
AI 时代,你的编程能力在第几层?我敢说,大多数人卡在第一层
前端·ai编程·claude
wear工程师2 小时前
React 的 key 为什么不能随手用 index:一插入列表,状态就串了
javascript·react.js
东风破_2 小时前
React Router v7 实战:用路由配置、懒加载与嵌套路由搭建一个完整的 SPA
前端