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

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

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

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

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

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

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

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

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

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

相关推荐
尘世中一位迷途小书童2 小时前
用 Cesium 撸了一个森林火情监控大屏,弧线、粒子、发光效果都齐了
前端·javascript
IT_陈寒2 小时前
垃圾回收器选错了,我的Java服务内存炸了
前端·人工智能·后端
月光下的丝瓜3 小时前
Flutter 国内安装指南
前端·flutter
先吃饱再说3 小时前
JavaScript中`this` 的“千层套路”:从默认绑定到箭头函数的五种指向
javascript
玄星啊3 小时前
AI 编程的第 30 天,我怀念古法 Coding 了
前端·ai编程
Jolyne_3 小时前
Angular基础速通
前端·angular.js
foxire3 小时前
基于nodejs实现服务端内核引擎
javascript
锋行天下4 小时前
半秒开!还有谁!!!
前端·vue.js·架构
代码搬运媛5 小时前
git 下中文文件名乱码问题解决
前端
CaffeinePro5 小时前
告别知识点零散!React零基础通关,从环境搭建到Ant Design页面实战
前端·react.js