Reactjs （swiper/react）使用useRef的自定义导航是'；t工作不正常

尝试自定义导航，然后应用样式就完成了，但实际上有时单击不起作用会出现问题

代码：

export const CustomSwiper:FC=({
儿童
}) => {
const prevRef=useRef（null）；
const nextRef=useRef（null）；
常量swiperParams:SwiperOptions={
幻灯片视图：3，
中心幻灯片：对，
导航：{
prevEl:prevRef.current？prevRef.current:未定义，
nextEl:nextRef.current？nextRef.current:未定义，
},
循环：对，
}
返回(
幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
幻灯片7
)
}

预期行为：

每次点击按钮都会向左/向右滑动

实际行为：

---

有时可以，但大多数时间都不起作用。

您不需要为此使用useRef。 在文档中，nextEl和prevEl使用CSS选择器接收HtmleElement或string，因此可以尝试以下操作：

<Swiper
  navigation={{
   prevEl: '.prev',
   nextEl: '.next',
 }}
>
    <SwiperSlide>slide 1</SwiperSlide>
    <SwiperSlide>slide 2</SwiperSlide>
    <div className="prev"></div>
    <div className="next"></div>
</Swiper>

<div className='slider-wrapper'>
    <Swiper
      navigation={{
       prevEl: '.prev',
       nextEl: '.next',
     }}
    >
        <SwiperSlide>slide 1</SwiperSlide>
        <SwiperSlide>slide 2</SwiperSlide>
    
    </Swiper>
    <div className="prev"></div>
    <div className="next"></div>
</div>

幻灯片1
幻灯片2

就我而言，我喜欢这样：

<Swiper
  navigation={{
   prevEl: '.prev',
   nextEl: '.next',
 }}
>
    <SwiperSlide>slide 1</SwiperSlide>
    <SwiperSlide>slide 2</SwiperSlide>
    <div className="prev"></div>
    <div className="next"></div>
</Swiper>

<div className='slider-wrapper'>
    <Swiper
      navigation={{
       prevEl: '.prev',
       nextEl: '.next',
     }}
    >
        <SwiperSlide>slide 1</SwiperSlide>
        <SwiperSlide>slide 2</SwiperSlide>
    
    </Swiper>
    <div className="prev"></div>
    <div className="next"></div>
</div>

幻灯片1
幻灯片2