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

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

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

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

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

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

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

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

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

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

相关推荐
幼儿园技术家16 小时前
Hydration Mismatch 原理详解:SSR 项目中最容易踩的坑
前端
郑州光合科技余经理16 小时前
实战分享:如何构建东南亚高并发跑腿配送系统
java·开发语言·javascript·spring cloud·uni-app·c#·php
June bug16 小时前
【Vue】EACCES: permission denied 错误
前端·javascript·vue.js
陈随易16 小时前
PostgreSQL v18发布,新增AIO uuidv7 OAuth等功能
前端·后端·程序员
一只小阿乐16 小时前
react 中的组件性能优化
前端·javascript·react.js·react组件性能优化
柯南二号16 小时前
【大前端】【iOS】iOS 真实项目可落地目录结构方案
前端·ios
肉清16 小时前
linux自用命令
linux·服务器·前端
weibkreuz16 小时前
初始React@1
前端·react.js·前端框架
xiaoxue..16 小时前
二叉树深度解析:从基础结构到实战应用
javascript·数据结构·面试
Coder_Boy_16 小时前
前端和后端软件系统联调经典问题汇总
java·前端·驱动开发·微服务·状态模式