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

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

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

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

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

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

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

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

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

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

相关推荐
A接拉起00728 分钟前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
_馒头28 分钟前
pixiJs游戏开发实践 - 跳棋小游戏
javascript·vue.js
用户114818678948433 分钟前
面试官:大屏项目里十几个模块同时渲染上万条数据,怎么做到不卡?
前端·性能优化
前端市界36 分钟前
Pro React Admin: 统一工程底座,承载多种应用...
前端·github
葡萄城技术团队43 分钟前
dsh-spreadjs-editor 当前支持什么:安装前需要了解的几件事
前端
三*一1 小时前
优化修整算法
前端·javascript·算法
楠楠子呀2 小时前
英语、西语、阿语客户各开一个口:多语言获客的分流方案
开发语言·javascript·ecmascript·跨境电商·whatsapp·营销工具
weifont2 小时前
自动化抓取和上架商品:能不动手,就少动手
运维·前端·自动化
米柆2 小时前
HTML5 audio /video 完整事件监听模板
前端·html·html5
半个落月2 小时前
LangGraph.js 实战:从状态图到分支、循环、检查点与人工中断
javascript·人工智能·langchain