6

反応スリックの問題で立ち往生しています。件名は意味をなさないかもしれませんが、シナリオを詳しく説明しようと思います。実際の問題を確認するには、この例のフィドルを参照してください。

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 枚のスライド (1 ページあたり 3 枚) が表示されます。ボタンをクリックすると、乱数が生成され、それが新しいスライド数になります。コードはかなり単純で、一目瞭然です。

問題を再現するには、 1. 最後のスライドに到達するまで [次へ] 矢印をクリックし続けます。
2. 「クリック」というボタンをクリックして、新しい乱数のスライドを生成します。

私の予想では、スライドは最初のスライドに戻りますが、以前のページにとどまることはありませんでした。さらに悪いことに、新しいスライド数が以前の数よりも少ない場合、ユーザーにはスライドのない空白のページが表示されます。[前のエラー] をクリックすると、前のスライドに移動でき、すべてが正常に機能しますが、最初の表示ではユーザー エクスペリエンスが損なわれます。

コードに追加するのに欠けているものはありますか、それともバグですか?

ありがとう、アビ。

4

2 に答える 2

1

簡単な回避策: 新しいスライド セットに変更するときは、コンポーネントを削除して、もう一度再構築します。次に、最初のスライドから始めます。keyの属性をインクリメントすることでこれを行うことができますDemoSlider。

適切な修正を行うには、「現在のスライド」を変更するようにコンポーネントに指示する必要があります。これにより、コンポーネントは最後以降のスライド インデックスではなく、 https://cdnjs.cloudflareのソースをさりげなく見るようになります。 com/ajax/libs/react-slick/0.11.0/react-slick.jsは、現在これを許可していないことを示唆しています。InnerSlider.componentWillReceiveProps()とをチェックするstate.currentSlideには、 に変更を加える必要がありprops.slidesToShowますstate.slideCount。

currentSlideまた、小道具として渡すことを許可することも役立ちます。

于 2016-06-03T22:24:08.977 に答える