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

Question

我在react中使用react-id-swiper模块来加载 slider ，我在一些具有不同id属性的按钮上设置了onClick事件处理程序，每次用户单击按钮时都会调用具有不同id的API ，状态被更新，因此 ImageSlider 组件被加载，并且一些图像显示在模态上的 slider 中。图像按预期显示，但问题是，每当单击新按钮时，都会加载新图像，但分页按钮不会重置，并且分页按钮的数量固定为第一个 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;

一个简单直接的答案将受到赞赏，谢谢。

Answer 1

我通过将 rebuildOnUpdate: true 属性添加到传递给 Swiper 的参数中找到了解决方案。完整的 Prop 列表可以在这里找到react-id-swiper original props .