ant-design的走马灯(Carousel)组件在TS(typescript)环境中调用prev以及next方法

一. 环境

react: “18.1.0”
antd：“^4.20.5” （react版）
next.js：“12.1.6”
typescript：“4.6.4”

二. 代码

import type { NextPage, GetServerSideProps, InferGetServerSidePropsType } from 'next'
import styles from '../styles/Home.module.scss'
import cn from 'classnames'
import { Store } from '@/store/store'
import { createRef } from 'react'
import { Carousel, Button } from 'antd'
import type { CarouselRef } from 'antd/lib/carousel'

interface IProps {}

const contentStyle: React.CSSProperties = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
}

const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ({}) => {
  const carRef = createRef<CarouselRef>()
  const next = () => {
  	console.log('next')
    carRef.current?.next()
  }
  const prev = () => {
  	console.log(carRef)
    console.log('prev')
    carRef.current?.prev()
  }
  // dots={false} 隐藏tab切换栏(小按钮)  vertical={true} 垂直方向移动
  return (
    <div className={cn(styles['home-page'])}>
      <Carousel dots={false} ref={carRef} vertical={true}>
        <div>
          <div style={contentStyle}>1</div>
        </div>
        <div>
          <div style={contentStyle}>2</div>
        </div>
        <div>
          <div style={contentStyle}>3</div>
        </div>
        <div>
          <div style={contentStyle}>4</div>
        </div>
      </Carousel>
      <Button onClick={next}>next</Button>
      <Button onClick={prev}>prev</Button>
    </div>
  )
}
export default Home

export const getServerSideProps: GetServerSideProps<IProps> = Store.getServerSideProps((store) => async ({ req }) => {
  return {
    props: {},
  }
})

效果如下图：

（完）