当前位置:网站首页>The carousel component of ant design calls prev and next methods in TS (typescript) environment
The carousel component of ant design calls prev and next methods in TS (typescript) environment
2022-07-06 09:03:00 【Frost and snow】
One . Environmental Science
react: “18.1.0”
antd:“^4.20.5” (react edition )
next.js:“12.1.6”
typescript:“4.6.4”
Two . Code
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} hide tab Toggle bar ( Small button ) vertical={true} Moving vertically
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: {
},
}
})
The effect is as follows :
( End )
边栏推荐
- Intel distiller Toolkit - Quantitative implementation 3
- Compétences en mémoire des graphiques UML
- 项目连接数据库遇到的问题及解决
- [oc]- < getting started with UI> -- learning common controls
- Selenium+pytest automated test framework practice (Part 2)
- 使用latex导出IEEE文献格式
- LeetCode:673. 最长递增子序列的个数
- A convolution substitution of attention mechanism
- LeetCode41——First Missing Positive——hashing in place & swap
- Intel Distiller工具包-量化实现1
猜你喜欢
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
postman之参数化详解
项目连接数据库遇到的问题及解决
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
Intel distiller Toolkit - Quantitative implementation 2
Post training quantification of bminf
Using pkgbuild:: find in R language_ Rtools check whether rtools is available and use sys The which function checks whether make exists, installs it if not, and binds R and rtools with the writelines
Advanced Computer Network Review(3)——BBR
CUDA实现focal_loss
[OC foundation framework] - string and date and time >
随机推荐
LeetCode:124. Maximum path sum in binary tree
Pytest parameterization some tips you don't know / pytest you don't know
Advance Computer Network Review(1)——FatTree
CSP first week of question brushing
LeetCode:387. The first unique character in the string
CUDA realizes focal_ loss
LeetCode:394. String decoding
甘肃旅游产品预订增四倍:“绿马”走红,甘肃博物馆周边民宿一房难求
MySQL uninstallation and installation methods
LeetCode:剑指 Offer 48. 最长不含重复字符的子字符串
BN folding and its quantification
TDengine 社区问题双周精选 | 第三期
Super efficient! The secret of swagger Yapi
【嵌入式】使用JLINK RTT打印log
LeetCode:41. Missing first positive number
postman之参数化详解
[embedded] cortex m4f DSP Library
UML diagram memory skills
数字人主播618手语带货,便捷2780万名听障人士
Intel Distiller工具包-量化实现2