当前位置:网站首页>ant-design的走马灯(Carousel)组件在TS(typescript)环境中调用prev以及next方法
ant-design的走马灯(Carousel)组件在TS(typescript)环境中调用prev以及next方法
2022-07-06 08:50:00 【霜雪遥】
一. 环境
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: {
},
}
})
效果如下图:
(完)
边栏推荐
- Charging interface docking tutorial of enterprise and micro service provider platform
- 电脑F1-F12用途
- LeetCode:387. 字符串中的第一个唯一字符
- Computer cleaning, deleted system files
- 704 binary search
- Detailed explanation of heap sorting
- 深度剖析C语言数据在内存中的存储
- Revit 二次开发 HOF 方式调用transaction
- egg. JS getting started navigation: installation, use and learning
- TCP/IP协议
猜你喜欢
可变长参数
被破解毁掉的国产游戏之光
Deep anatomy of C language -- C language keywords
优秀的软件测试人员,都具备这些能力
个人电脑好用必备软件(使用过)
LeetCode:221. 最大正方形
Light of domestic games destroyed by cracking
egg. JS project deployment online server
JS native implementation shuttle box
Sublime text using ctrl+b to run another program without closing other runs
随机推荐
egg. JS getting started navigation: installation, use and learning
JVM quick start
The harm of game unpacking and the importance of resource encryption
Roguelike游戏成破解重灾区,如何破局?
sublime text没关闭其他运行就使用CTRL+b运行另外的程序问题
随手记01
swagger设置字段required必填
力扣每日一题(二)
MYSQL卸载方法与安装方法
Compétences en mémoire des graphiques UML
TDengine 社区问题双周精选 | 第三期
电脑清理,删除的系统文件
项目连接数据库遇到的问题及解决
visdom可视化实现与检查介绍
win10系统中的截图,win+prtSc保存位置
Fairguard game reinforcement: under the upsurge of game going to sea, game security is facing new challenges
软件压力测试常见流程有哪些?专业出具软件测试报告公司分享
Guangzhou will promote the construction of a child friendly city, and will explore the establishment of a safe area 200 meters around the school
Generator parameters incoming parameters
Tdengine biweekly selection of community issues | phase III