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

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

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

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

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

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

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

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

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

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

相关推荐
郑州光合科技余经理17 小时前
海外O2O系统源码剖析:多语言、多货币架构设计与二次开发实践
java·开发语言·前端·小程序·系统架构·uni-app·php
arvin_xiaoting1 天前
OpenClaw学习总结_I_核心架构_8:SessionPruning详解
前端·chrome·学习·系统架构·ai agent·openclaw·sessionpruning
工程师老罗1 天前
Image(图像)的用法
java·前端·javascript
早點睡3901 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-swiper
javascript·react native·react.js
jump_jump1 天前
深入 JavaScript Iterator Helpers:从 API 到引擎实现
javascript·性能优化
swipe1 天前
把 JavaScript 原型讲透:从 `[[Prototype]]`、`prototype` 到 `constructor` 的完整心智模型
前端·javascript·面试
问道飞鱼1 天前
【前端知识】React 组件生命周期:从底层原理到实践场景
前端·react.js·前端框架·生命周期
Dxy12393102161 天前
JS发送请求的方法详解
开发语言·javascript·ecmascript
CHU7290351 天前
定制专属美丽时刻:美容预约商城小程序的贴心设计
前端·小程序
浩~~1 天前
反射型XSS注入
前端·xss