React-Slick Slider bleibt auf der gleichen Seite, wenn Dias Artikel geändert werden

Question

Ich bin mit einem Problem mit react-slick fest. Die Betreffzeile mag keinen Sinn ergeben, aber ich werde versuchen, das Szenario im Detail zu erklären. Sehen Sie sich dieses Beispiel fiddle an, um das Problem in Aktion zu sehen.

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> 
); 
} 
}); 

In dieser Demo zeigt der Schieber zunächst 20 Folien (3 pro Seite). Die Idee ist, dass wenn Sie auf die Schaltfläche klicken, wird eine Zufallszahl generiert, die die neue Anzahl der Folien wäre. Der Code ist ziemlich einfach und selbsterklärend.

Um das Problem zu reproduzieren, 1. Klicken Sie weiter auf Weiter, bis Sie die letzte Folie erreichen.
2. Klicken Sie auf die Schaltfläche "Klicken", um eine neue zufällige Anzahl von Folien zu generieren.

Meine Erwartung war, dass die Folie auf die erste Folie zurückgehen wird, aber nicht auf der Seite bleiben wird, wo sie vorher war. Schlimmer noch, wenn die neue Anzahl von Dias niedriger ist als die vorherige Zahl, wird dem Benutzer eine leere Seite ohne Dias angezeigt. Wenn Sie auf Vorheriger Fehler klicken, kann er/sie zu den vorherigen Folien gehen, und alles funktioniert normal, aber die anfängliche Anzeige ruiniert die Benutzererfahrung.

Gibt es etwas, das ich im Code nicht hinzufügen kann, oder ist das ein Fehler?

Danke, Abhi.

Answer 1

Ich würde sagen, es ist eher ein fehlerhaftes Verhalten, aber immer noch können Sie erreichen, was Sie durch Erzwingen einer Neuzeichnung wollen nach neuen Kollektion wurde als props verabschiedet, durch key die Neueinstellung reagieren:

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

UPDATED FIDDLE

Answer 2

Schnelle Abhilfe: Wenn Sie zu einem neuen Foliensatz wechseln, entfernen Sie die Komponente und bauen Sie sie erneut um. Es würde dann mit der ersten Folie beginnen. Sie können dies tun, indem Sie das key Attribut von DemoSlider inkrementieren.

Für eine ordnungsgemäße Lösung müssen Sie der Komponente mitteilen, dass sie die aktuelle Folie ändern soll, damit sie nicht auf einen Folienindex über das Ende hinaus schaut, aber ein zufälliger Blick auf die Quelle bei https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11.0/react-slick.js deutet darauf hin erlaubt das nicht. Eine Änderung müsste an InnerSlider.componentWillReceiveProps() vorgenommen werden, um state.currentSlide gegen props.slidesToShow und state.slideCount zu überprüfen.

Es würde auch davon profitieren, currentSlide zu erlauben, als Requisiten bestanden zu werden.