如果幻灯片项目更改，React-slick Slider 保持在同一页面上答案

【问题标题】：React-slick Slider stays on same page if slides items are changed如果幻灯片项目更改，React-slick Slider 保持在同一页面上
【发布时间】：2016-09-26 18:54:05
【问题描述】：

我遇到了 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>
);
}
});

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

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

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

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

谢谢，阿比。

【问题讨论】：

标签： reactjs react-slick

【解决方案1】：

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

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

UPDATED FIDDLE

【讨论】：

谢谢哥们。虽然 hacky，但这对我来说非常有效。

【解决方案2】：

快速解决方法：当您更改为一组新幻灯片时，请移除该组件，然后重新构建它。然后从第一张幻灯片开始。您可以通过增加DemoSlider 的key 属性来做到这一点。

要进行适当的修复，您需要告诉组件更改“当前幻灯片”，这样它就不会查看超出末尾的幻灯片索引，而是随意查看https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11.0/react-slick.js 的源代码会建议它目前不允许这样做。需要对InnerSlider.componentWillReceiveProps() 进行更改，以检查state.currentSlide 与props.slidesToShow 和state.slideCount。

允许currentSlide 作为道具传递也会受益。

【讨论】：