代码之家 › 专栏 › 技术社区 › H.Sdq

如何在React中每次调用事件处理程序时重置React ID刷卡器?

swiper reactjs javascript

H.Sdq · 技术社区 · 6 年前

我在react中使用了react id滑动器模块来加载一个滑动器,我在一些具有不同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;

一个简单的直截了当的回答是值得赞赏的, 谢谢。

3 回复 | 直到 6 年前

Santiago Pernigotti 6 年前

前一段时间我也遇到了类似的问题,看看我的解决方案是否有效。

当幻灯片道具更新后,您需要通过更新方法手动更新刷卡器。 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;

H.Sdq 6 年前

我通过添加 rebuildOnUpdate: true 支持传递给刷卡器的参数。在这里可以找到道具的完整列表 react-id-swiper original props .

malik Mazhar Ali 6 年前

我的刷卡更新解决方案,我使用Redux加载项目。你应该为我做这个工作吗?

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