时间戳

首页 > 解决方案 > 每次在 React 中调用事件处理程序时如何重置 react-id-swiper？

javascript - 每次在 React 中调用事件处理程序时如何重置 react-id-swiper？

问题描述

我正在使用 react-id-swiper 模块来响应加载滑块，我在一些具有不同 id 属性的按钮上设置了 onClick 事件处理程序，每次用户单击按钮时都会调用具有不同 id 的 API，状态已更新，因此加载了 ImageSlider 组件，并且一些图像显示在模态的滑块中。图像按预期显示，但问题是每当单击新按钮时都会加载新图像，但分页按钮不会重置，并且分页按钮的数量固定为第一个 API 调用图像的数量！所以我猜刷卡器没有被重置。我正在研究如何在组件中渲染刷卡器之前重置或销毁刷卡器，但我没有任何运气。

到目前为止，我已经检查了提到的页面，但无法找到解决方案！ react-id-swiper和 react-id-swiper npm

这是 ImageSlider 组件：

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;

感谢您提供简单直接的答案，谢谢。

标签： javascriptreactjsswiper

解决方案

我通过将rebuildOnUpdate: trueprop 添加到传递给 Swiper 的参数中找到了解决方案。可以在此处找到完整的道具列表react-id-swiper original props。

推荐阅读