小编mae*_*tin的帖子

SwiperJS 文档指出导航 prevEl/nextEl 可以是“字符串”或“HTMLElement”类型。使用字符串选择器很容易，因为：

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

但是，如何使用 React refs 正确实现？使用 HTML 节点而不是字符串选择器允许将导航 prevEl/nextEl 范围限定为MySwiper.

const App = () => (
  <div>
    <MySwiper className="mySwiper1" />
    <MySwiper className="mySwiper2" />
  </div>
)

在APP上面的例子，导航prevEl / Nextel公司从.mySwiper2应该不会引发滑动.mySwiper1，这将与字符串选择发生什么。

我目前的悲伤和hacky解决方法：

const MySwiper = () => {
  const navigationPrevRef = React.useRef(null)
  const …