记录React中使用swiper的一些问题

记录React中使用swiper的一些问题

最近在做一个可视化的项目，用的是react hooks的写法。遇到一个需求，需要轮播并指定轮播动画来展示一些大屏，于是引用了swiper。其中需求要求可以点击按钮来跳转到轮播的某一页，查api找到slideTo这个方法，但用了ref并不能拿到这个方法，最后在stackoverflow上找到了答案，通过onSwiperprops拿到了实例。
记录一下代码：

import React,{useState} from "react"
import {Swiper,SwiperSlide} from 'swiper/react'
import SwiperCore,{Autoplay,EffectCoverflow,EffectFade} from 'swiper/core'
//引入一些css省略了
SwiperCore.use([Autoplay,EffectCoverflow,EffectFade]);
const PanelPreview=(props)=>{
  const [instance,setInstance]=useState(null);
  const setGroup=(index)=>{
   instance.slideTo(index-1)
  }
  return <>
    <button onClick={()=>{setGroup(1)}}>1</button>
    <button onClick={()=>{setGroup(2)}}>2</button>
    <button onClick={()=>{setGroup(3)}}>3</button>
    <Swiper effect={"coverflow"} speed={1000} autoplay={{"delay":6000,disableOnInteraction:false}}  coverflowEffect={{省略了}} onSwiper={setInstance}>
    {
    [1,2,3].map((item,index)=>{
    return <SwiperSlide key={index}>{item}</SwiperSlide>
    })
    }
    </Swiper>
   </>
}