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

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

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

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

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

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

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

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

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

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

相关推荐
哈哈你是真的厉害13 小时前
基础入门 React Native 鸿蒙跨平台开发:AnimatedXY 动画插值
react native·react.js·harmonyos
Shirley~~14 小时前
leetcode移除元素
javascript·数据结构·算法
AC赳赳老秦14 小时前
Prometheus + DeepSeek:自动生成巡检脚本与告警规则配置实战
前端·javascript·爬虫·搜索引擎·prometheus·easyui·deepseek
接着奏乐接着舞。14 小时前
前端大数据渲染性能优化:Web Worker + 分片处理 + 渐进式渲染
大数据·前端·性能优化
Beginner x_u14 小时前
CSS 中的高度、滚动与溢出:从 height 到 overflow 的完整理解
前端·css·overflow·min-height
vx1_Biye_Design14 小时前
基于web的物流管理系统的设计与实现-计算机毕业设计源码44333
java·前端·spring boot·spring·eclipse·tomcat·maven
摘星编程14 小时前
React Native + OpenHarmony:Animated 弹簧动画实现代码
javascript·react native·react.js
tqs_1234514 小时前
倒排索引数据结构
java·前端·算法
a程序小傲14 小时前
听说前端又死了?
开发语言·前端·mysql·算法·postgresql·深度优先
Yan.love15 小时前
【CSS-布局】终极方案:Flexbox 与 Grid 的“降维打击”
前端·css