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: {
    },
  }
})

效果如下图：

（完）