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

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

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

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

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

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

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

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

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

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

相关推荐
馨谙2 分钟前
面试题----用户,组,su,su-,sudo,sudo-,nologin shell
java·前端·数据库
王同学 学出来19 分钟前
React案例实操(二)
前端·react.js·前端框架
向前V27 分钟前
Flutter for OpenHarmony 二维码扫描App实战 - 关于实现
开发语言·javascript·flutter
weixin_4277716129 分钟前
Vite 与 Webpack 模块解析差异
前端·webpack·node.js
永远是我的最爱31 分钟前
基于ASP.NET的图书管理系统的设计与实现
前端·后端·sql·visual studio
广州华水科技39 分钟前
单北斗GNSS技术在变形监测中的应用及其位移监测优势解析
前端
刘晓倩44 分钟前
Python内置函数-hasattr()
前端·javascript·python
爱上妖精的尾巴1 小时前
7-10 WPS JS宏 对象使用实例7--拆分单表到多工作簿下的多表
javascript·restful·wps·jsa
C_心欲无痕1 小时前
不点击鼠标也能通过MouseEvent实现点击事件
前端·javascript
鲨莎分不晴1 小时前
【实战】老项目焕发新生:从 Webpack 平滑迁移到 Vite 避坑全记录
前端·webpack·node.js