如果更改幻灯片项目,React-slick Slider 会保持在同一页面上
React-slick Slider stays on same page if slides items are changed
我遇到了 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. 单击 'Click' 按钮生成新的随机幻灯片数。
我的预期是幻灯片将返回到第一张幻灯片,但不会停留在之前所在的页面上。更糟糕的是,如果新的幻灯片数量低于之前的数量,用户将看到一个没有幻灯片的空白页面。单击上一个错误时,he/she 可以转到上一张幻灯片,一切正常,但初始显示会破坏用户体验。
代码中是否缺少要添加的内容,或者这是一个错误?
谢谢,
阿比.
我会说这是一个错误的行为,但你仍然可以通过在新集合作为 props
传递后强制重绘来实现你想要的,通过重置反应的 key
:
<DemoSlider key={Date.now()} count={this.state.count}/>
快速解决方法:当您更改为一组新幻灯片时,删除该组件,然后重新构建它。然后将从第一张幻灯片开始。您可以通过增加 DemoSlider
.
的 key
属性来完成此操作
为了正确修复,您需要告诉组件更改 'current slide',这样它就不会查看末尾之后的幻灯片索引,而是随意查看 [= 处的源代码17=] 表明它目前不允许这样做。需要对 InnerSlider.componentWillReceiveProps()
进行更改以检查 state.currentSlide
与 props.slidesToShow
和 state.slideCount
.
允许 currentSlide
作为 props 传递也会有好处。
我遇到了 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. 单击 'Click' 按钮生成新的随机幻灯片数。
我的预期是幻灯片将返回到第一张幻灯片,但不会停留在之前所在的页面上。更糟糕的是,如果新的幻灯片数量低于之前的数量,用户将看到一个没有幻灯片的空白页面。单击上一个错误时,he/she 可以转到上一张幻灯片,一切正常,但初始显示会破坏用户体验。
代码中是否缺少要添加的内容,或者这是一个错误?
谢谢, 阿比.
我会说这是一个错误的行为,但你仍然可以通过在新集合作为 props
传递后强制重绘来实现你想要的,通过重置反应的 key
:
<DemoSlider key={Date.now()} count={this.state.count}/>
快速解决方法:当您更改为一组新幻灯片时,删除该组件,然后重新构建它。然后将从第一张幻灯片开始。您可以通过增加 DemoSlider
.
key
属性来完成此操作
为了正确修复,您需要告诉组件更改 'current slide',这样它就不会查看末尾之后的幻灯片索引,而是随意查看 [= 处的源代码17=] 表明它目前不允许这样做。需要对 InnerSlider.componentWillReceiveProps()
进行更改以检查 state.currentSlide
与 props.slidesToShow
和 state.slideCount
.
允许 currentSlide
作为 props 传递也会有好处。