使用 Swiper React 和 typescript 自定义导航

Question

我正在使用Swiper React 创建轮播。

在关注this issue 之后，我正在努力让它工作。

我创建了一个自定义钩子：

// useSwiperRef.ts
import { useState, useRef, useEffect } from 'react';

const useSwiperRef = () => {
  const [wrapper, setWrapper] = useState(null);
  const ref = useRef(null);

  useEffect(() => {
    setWrapper(ref.current);
  }, []);

  return [wrapper, ref];
};

export default useSwiperRef;

还有我的旋转木马：

import useSwiperRef from 'useSwiperRef.js';

const Slider = () => {

    const [nextEl, nextElRef] = useSwiperRef();
    const [prevEl, prevElRef] = useSwiperRef();

    return (
        <Container>
            <Swiper
                navigation={{
                    prevEl,
                    nextEl,
                }}
            >
                <SwiperSlide>1</SwiperSlide>
                <SwiperSlide>2</SwiperSlide>
                <SwiperSlide>3</SwiperSlide>
            </Swiper>
            <Nav ref={prevElRef} />
            <Nav ref={nextElRef} />
        </Container>
    );
};

但我在prevEl 和nextEl 内的navigation {{}} 上收到以下打字稿错误：

键入'MutableRefObject | null' 不可分配给类型 'HTML元素 | CSS 选择器 |空 |不明确的'。类型 'MutableRefObject' 不可分配给类型 'HTMLElement | CSS 选择器 |空 |不明确的'。 “MutableRefObject”类型缺少“CSSSelector”类型的以下属性：charAt、charCodeAt、concat、indexOf 和 43 更多。

有人知道如何解决这个问题吗？

Answer 1

在文档中 nextEl 和 prevEl 接收 HTMLElement 或带有 CSS 选择器的字符串，所以应该是这样的：

<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>