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

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

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

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

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

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

renderIndicator
, renderArrow
分别渲染指示器和切换箭头。
最后 render
方法返回一个 div
容器,包裹整个组件。

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