Swiper 反应 |如何使用 React refs 创建自定义导航/分页组件? [英] Swiper React | How to create custom navigation/pagination components using React refs?

问题描述

SwiperJS 文档 指出导航 prevEl/nextEl 可以是字符串"类型，也可以是字符串"类型.或HTML元素".使用字符串选择器很容易，因为:

const MySwiper = (props) =>(<刷卡机导航={{prevEl: '.prev',nextEl: '.next',}}{...道具}><SwiperSlide>幻灯片1</SwiperSlide><SwiperSlide>幻灯片2</SwiperSlide><div className="prev";/><div className="next"/></Swiper>)

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

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

)

在上面的应用示例中，来自 .mySwiper2 的导航 prevEl/nextEl 应该不触发 .mySwiper1 的滑动，这就是会发生的情况带有字符串选择器.

我目前的悲伤&hacky 解决方法:

const MySwiper = () =>{const navigationPrevRef = React.useRef(null)const navigationNextRef = React.useRef(null)返回 (<刷卡机导航={{//prevEl &nextEl 在渲染时为空，所以这不起作用prevEl: 导航PrevRef.current,nextEl: 导航NextRef.current,}}onSwiper={(swiper) =>{//延迟执行要定义的 refssetTimeout(() => {//覆盖 prevEl &nextEl 现在已经定义了 refsswiper.params.navigation.prevEl = navigationPrevRef.currentswiper.params.navigation.nextEl = navigationNextRef.current//重新初始化导航swiper.navigation.destroy()swiper.navigation.init()swiper.navigation.update()})}}><SwiperSlide>幻灯片1</SwiperSlide><SwiperSlide>幻灯片2</SwiperSlide><div ref={navigationPrevRef}/><div ref={navigationNextRef}/></Swiper>)}

解决方案

我想我解决了这个问题，我也遇到了同样的问题，但最后，让我们开始

 1. import SwiperCore, { Navigation} from 'swiper'2. SwiperCore.use([导航])3.我会用你的例子:const MySwiper = () =>{const navigationPrevRef = React.useRef(null)const navigationNextRef = React.useRef(null)返回 (<刷卡机导航={{prevEl: 导航PrevRef.current,nextEl: 导航NextRef.current,}}onBeforeInit={{swiper.params.navigation.prevEl = navigationPrevRef.current;swiper.params.navigation.nextEl = navigationNextRef.current;}}><SwiperSlide>幻灯片1</SwiperSlide><SwiperSlide>幻灯片2</SwiperSlide><div ref={navigationPrevRef}/><div ref={navigationNextRef}/></Swiper>)}

就是这样，所以如果您检查 Swiper duc，则有一个仅适用于 API 的页面，您可以在其中找到讨论 swiper 提供的事件的部分，无论如何我希望这对您有所帮助

SwiperJS documentation states that navigation prevEl/nextEl can either be of type "string" or "HTMLElement". Using string selectors is easy enough as:

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

However, how would this be correctly implemented with React refs? Using HTML nodes instead of string selectors allows for navigation prevEl/nextEl to be scoped to each rendered instance of MySwiper.

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

In the App example above, navigation prevEl/nextEl from .mySwiper2 should not trigger sliding of .mySwiper1, which is what would happen with string selectors.

My current sad & hacky workaround:

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

  return (
    <Swiper
      navigation={{
        // Both prevEl & nextEl are null at render so this does not work
        prevEl: navigationPrevRef.current,
        nextEl: navigationNextRef.current,
      }}
      onSwiper={(swiper) => {
        // Delay execution for the refs to be defined
        setTimeout(() => {
          // Override prevEl & nextEl now that refs are defined
          swiper.params.navigation.prevEl = navigationPrevRef.current
          swiper.params.navigation.nextEl = navigationNextRef.current

          // Re-init navigation
          swiper.navigation.destroy()
          swiper.navigation.init()
          swiper.navigation.update()
        })
      }}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <div ref={navigationPrevRef} />
      <div ref={navigationNextRef} />
    </Swiper>
  )
}

解决方案

I think I fixed the issue, I also faced the same problem, but finally, let's start

 1. import SwiperCore, { Navigation} from 'swiper'
 2. SwiperCore.use([Navigation])
 3. i will use your exmaple:     

    const MySwiper = () => {
      const navigationPrevRef = React.useRef(null)
      const navigationNextRef = React.useRef(null)
      return (
        <Swiper
          navigation={{
            prevEl: navigationPrevRef.current,
            nextEl: navigationNextRef.current,
          }}
         onBeforeInit={{
              swiper.params.navigation.prevEl = navigationPrevRef.current;
              swiper.params.navigation.nextEl = navigationNextRef.current;
         }}
        >
          <SwiperSlide>slide 1</SwiperSlide>
          <SwiperSlide>slide 2</SwiperSlide>
          <div ref={navigationPrevRef} />
          <div ref={navigationNextRef} />
        </Swiper>
      )
    }

that's it, so if you check Swiper duc there is a page only for API, where you can find a section talking about events that swiper provide, anyway i hope this was helpful

这篇关于Swiper 反应 |如何使用 React refs 创建自定义导航/分页组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！