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

Question

我遇到了一个关于react-slick 的问题。主题行可能没有意义，但我会尝试详细解释该场景。请参阅此示例 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>
);
}
});

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

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

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

我在代码中是否缺少添加某些内容，或者这是一个错误？

谢谢，阿比。

Answer 1

我想说这是一个相当有缺陷的行为，但是您仍然可以通过在新集合作为 props 传递后强制重绘来实现您想要的，通过重置 React 的 key:

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

UPDATED FIDDLE