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

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

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

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

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

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

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

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

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

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

相关推荐
用户298698530149 分钟前
在 React 中用 JavaScript 将 Word 转换为文本
前端·javascript·react.js
计算机魔术师21 分钟前
马斯克称 Grok 4.7 使 xAI 在智能体编码领域位列第三
前端
摸鱼仙人~27 分钟前
前端秋招异步手写题系统刷题路线:从 Promise 到 Pipeline、LazyMan 与并发控制
前端
秋天的一阵风29 分钟前
⚡上线 24 小时,13% 的付费团队连夜换到 Jev:它到底什么来头?
前端·人工智能·ai编程
程序员若风33 分钟前
CSRF攻击原理介绍和利用-腾讯云开发者社区
前端·网络·安全·web安全·网络安全·csrf攻击·腾讯云开发者社区
风尘小子34 分钟前
node.js系列:process配置
前端·node.js
恋猫de小郭37 分钟前
AndroidX 新增 Security State ,支持可编程的系统安全状态查询
android·前端·flutter
IT_陈寒1 小时前
Redis大key删除引发的服务雪崩,这次我真记住了
前端·人工智能·后端
李少兄2 小时前
深入解析 JavaScript 中的 `document` 对象
javascript
IMPYLH2 小时前
HTML 的 <style> 元素
前端·html