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

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

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

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

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

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

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

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

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

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

相关推荐
随风123weber4 小时前
从前端响应式到后端背压:深度拆解生成式 UI(Generative UI)
前端
用户059540174464 小时前
用 Pytest 接管大模型记忆存储测试,状态一致性问题减少 90%
前端·css
IT_陈寒4 小时前
JavaScript的异步地狱里,我的Promise掉进了微任务陷阱
前端·人工智能·后端
嘟嘟07174 小时前
大前端工程师必学:用 BFF 架构搭建安全的 AI 流式应用
前端
光影少年4 小时前
RN 原生动画 Animated 用法、动画性能优化
react native·react.js·掘金·金石计划
meilindehuzi_a4 小时前
Vue 项目中的前端 BFF:跨域代理与流式请求实战
前端·javascript·vue.js
小则又沐风a5 小时前
库的原理:目标文件,ELF格式,程序加载
java·linux·前端
程序员爱钓鱼5 小时前
Rust if let 与 while let 详解:简化模式匹配
前端·后端·rust
To_OC5 小时前
LC 79 单词搜索:都说这是回溯入门题,我却连错三回
javascript·算法·leetcode
胡萝卜术5 小时前
从暴力到滑动窗口的终极形态:力扣3「无重复字符的最长子串」的优化进化之路
前端·javascript·面试