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

Question

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

到目前为止，我已经检查了提到的页面，但未能找到解决方案！ 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

我前段时间遇到过类似的问题，看看我的解决方案是否有效。

slides props更新时需要通过update方法手动更新swiper。 API Documentation

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

class ImageSlider extends Component {
  componentDidUpdate(prevProps) {
    // when slides changes
    if(this.swiper && prevProps.sliderImages !== this.props.sliderImages) {
      // update swiper internally
      this.swiper.update();
      // go to first slide
      this.swiper.slideTo(0, 0);
    }
  }

    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 2

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

Answer 3

我的 Swiper 更新解决方案，我正在使用 redux 加载项目。 shouldSwiperUpdate 为我完成这项工作。

<Swiper {...params} shouldSwiperUpdate>
{books === null ? (
<List />
) : (
books.map(book => (
<div key={book._id}>
<CardItem book={book} />
              </div>
            ))
          )}
        </Swiper>`

`

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

How to reset react-id-swiper each time event handler is called in React?

javascript

swiper

reactjs