antd 类组件swiper中的指示器和ref

import React, { ReactNode } from ‘react’;

constructor(props: VGrageModelProps) {
super(props);
this.state = {};
this.indicatorRef = React.createRef();//创建了一个ref
}
render(): ReactNode {
return (

<Swiper
ref={this.indicatorRef}
indicator={(total, current) => (

<img
style={{ display: currentIndicator <= 0 ? ‘none’ : ‘block’ }}
src=“”
alt=“”
onClick={() => {
console.log(88, this.inputRef, this.inputRef.current);
this.indicatorRef.current.swipePrev();
this.setState({ currentIndicator: current - 1 });
}}
/>
= total - 1 ? ‘none’ : ‘block’,
}}
src=“”
alt=“”
onClick={() => {
this.indicatorRef.current.swipeNext();
this.setState({ currentIndicator: current + 1 });
}}
/>

)}
>
{list?.map((item, index) => (
<Swiper.Item key={index}>
99
<Swiper.Item>
}

}

我们使用了 createRef 创建了一个 ref，将其挂到了原生DOM元素 Swiper 上面，这时候，我们就可以通过 ref.current 获取到这个DOM元素，并且可以调用上面的方法。