你如何在 React 中使用 Swiper 回调方法？

Question

我有一个组件 class 并且需要能够使用 .slideToLoop() 和 .update()，但一直无法弄清楚如何在 Swiper 中使用这些方法反应库。

我需要在单击其他内容时执行此操作，以便 Swiper 可以更新（因为它最初是隐藏的），然后滑动到相关幻灯片。

目前，我在 componentDidMount() 中的 jQuery 中有点击触发器，因为我正在将内容移植到 React 中。但如果更好的话，也很乐意改变这一点。单击发生在孙组件上。我将滑动器实例设置为状态，但那是在 componentDidMount 之后发生的，所以我无法从那里访问它。

代码：

  constructor(props) {
    super(props);
    this.state = {
      swiperIns: ''
    }
  }
  
  setSwiper = (swiper) => {
    this.setState({swiperIns: swiper}, () => {
      console.log(this.state.swiperIns);
    });
  }


  componentDidMount() {
    const { appStore } = this.props;
    if (!appStore.hasLoadedHomePage)
      appStore.loadHomePage().catch((ex) => null);
      
     const mySwiper = this.state.swiperIns;
     console.log(mySwiper); // returns ''
      
      $('.modal-trigger').on('click', function(e) {
         e.preventDefault();
         var modalToOpen = $(this).attr('data-modal-id');
         console.log(modalToOpen);
             if ($(this)[0].hasAttribute('data-slideindex')) {
                 const slideTo = parseInt($(this).attr('data-slideindex'));
                 // this.state.slideToLoop(slideTo);
             }

             $('#' + modalToOpen).show();
             $('body').addClass('modal-open');
             
             if ($('#' + modalToOpen).hasClass('modal--swiper')) {
                 // this.state.swiperIns.update();
             }
     });
  }

Swiper 的 return 部分：

<Swiper onSwiper={ this.setSwiper } spaceBetween={0} slidesPerView={1} loop>
...
</Swiper>

如有任何帮助或建议，我们将不胜感激。

Answer 1

好的，我明白了。首先，您向构造函数添加一个引用：

constructor(props) {
    super(props);
    this.swiperRef = React.createRef();
}

并且在 componentDidMount 中，像这样：

const mySwiper = this.swiperRef;

然后在 Swiper 元素上，将 ref 设置为 Swiper 实例，如下所示：

<Swiper ref={ this.swiperRef }...</Swiper>

然后在按钮 clicks/functions 中，您可以使用 this.swiperRef.current?.swiper.slideNext(); 或任何其他 Swiper 回调方法 update/slideTo/etc。

你如何在 React 中使用 Swiper 回调方法？

How do you use the Swiper callback methods in React?

reactjs

swiper

swiperjs