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

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

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

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

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

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

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

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

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

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

相关推荐
Cobyte5 分钟前
Vite & Rollup 插件开发实践
前端·javascript·vue.js
朝阳397 分钟前
react19【系列实用教程】实用组件封装
开发语言·前端·javascript
IT_陈寒11 分钟前
React的useEffect依赖数组把我坑惨了,原来这样写才靠谱
前端·人工智能·后端
恋猫de小郭11 分钟前
Flutter hit,一个可以灵活控制溢出点击的第三方包
android·前端·flutter
古韵16 分钟前
小程序上传进度条,还要自己监听 onProgressUpdate 吗?
前端·javascript·uni-app
古韵17 分钟前
axios 已经跑得好好的,还要不要上 alova?
前端·javascript·axios
噗噗1226 分钟前
企业微信侧边栏应用与前端 JS-SDK 的深度整合指南
前端·javascript·企业微信
朝阳3932 分钟前
react19【实战】配置化路由登录鉴权完整方案
前端·javascript·react.js
ShuiShenHuoLe40 分钟前
vue如何实现国际化,它来了!
前端·javascript·vue.js
其美杰布-富贵-李42 分钟前
Vue Router 实战教程
前端·javascript·vue.js