Ant-design 源码分析之数据展示（五）Carousel

Ant-design 源码分析之数据展示（五）Carousel

2021SC@SDUSC

一、组件结构

1、ant代码结构

2、组件结构
antd中Carousel的index.tsx中引入了react-slick。

二、antd组件调用关系

1、index.tsx
导入相应模块以及相应的ICON图标

import * as React from 'react';
import SlickCarousel, {
    Settings } from '@ant-design/react-slick';
import classNames from 'classnames';
import {
    ConfigContext } from '../config-provider';

声明点位

//动画效果
export type CarouselEffect = 'scrollx' | 'fade';
//4个位置
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';

定义CarouselProps接口。

// Carousel
export interface CarouselProps extends Omit<Settings, 'dots' | 'dotsClass'> {
   
  effect?: CarouselEffect;
  style?: React.CSSProperties;
  prefixCls?: string;
  slickGoTo?: number;
  dotPosition?: DotPosition