Question

我正在使用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;

一个简单而直接的答案值得赞赏，谢谢。

Answer 1

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

更新幻灯片道具时，您需要通过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

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

Answer 3

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

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

`

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

3 个答案: