每次在react中调用事件处理程序时，如何重置react id刷卡器

Question

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

到目前为止，我已经检查了提到的页面，但未能找到解决方案反应id刷和反作用身份刷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的参数中找到了解决方案。完整的道具列表可以在这里找到反刷id的原始道具。

Answer 2

我之前也遇到过类似的问题，请检查我的解决方案是否有效。

当幻灯片道具更新时，您需要通过更新方法手动更新滑动器。API文件

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 3

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

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

`