Question

我遇到了反应灵敏的问题。主题可能没有意义，但我会尝试详细解释这个场景。请参阅此示例fiddle以查看操作中的问题。

var DemoSlider = React.createClass({
getSlides(count) {
var slides = [];
for(var i = 0; i < count; i++) {
    slides.push((<img key={i} src='http://placekitten.com/g/400/200' />));
}
return slides;
},

render: function() {
var settings = {
    dots: false,
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 3
}

var slides = this.getSlides(this.props.count);

return (
    <div className='container'>
    <Slider {...settings}>
        { slides }
    </Slider>
  </div>
);
}
});

在此演示中，最初滑块显示20张幻灯片（每页3张）。我们的想法是，如果单击该按钮，它将生成一个随机数，这将是新的幻灯片数。代码相当简单，不言自明。

要重现这个问题， 1.继续单击下一个箭头，直到到达最后一张幻灯片 2.点击“点击”按钮。生成一个新的随机数量的幻灯片。

我的期望是幻灯片将返回到第一张幻灯片，但不会停留在之前的页面上。更糟糕的是，如果新幻灯片数量低于之前的数量，用户将看到没有幻灯片的空白页面。单击“上一个”错误后，他/她可以转到上一个幻灯片，一切正常，但初始显示会破坏用户体验。

我是否缺少在代码中添加的东西，或者这是一个错误？

谢谢， ABHI。

Answer 1

我会说这是一个错误的行为，但是通过重置反应的props，你仍然可以通过强制重新绘制新的集合key来实现你想要的东西：

<DemoSlider key={Date.now()} count={this.state.count}/>

UPDATED FIDDLE

Answer 2

快速解决方法：当您更改为一组新幻灯片时，请删除该组件，然后重新构建它。然后它将从第一张幻灯片开始。您可以通过增加key的{{1}}属性来完成此操作。

要获得正确的修复，您需要告诉组件更改“当前幻灯片”，以便它不会查看超出结尾的幻灯片索引，而是随意查看https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11.0/react-slick.js处的来源表明目前不允许这样做。需要对DemoSlider进行更改，以针对InnerSlider.componentWillReceiveProps()和state.currentSlide检查props.slidesToShow。

允许state.slideCount作为道具传递也会受益。

如果幻灯片项目发生更改，则React-slick Slider会保留在同一页面上

2 个答案: