Il dispositivo di scorrimento React-slick rimane sulla stessa pagina se gli elementi delle diapositive vengono modificati

Question

Sono bloccato con un problema con reagisci-slick. L'argomento potrebbe non avere senso, ma proverò a spiegare lo scenario in dettaglio. Vedi questo esempio fiddle per vedere il problema in azione.

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 questa demo, inizialmente il cursore mostra 20 diapositive (3 per pagina). L'idea è che se fai clic sul pulsante, genererà un numero casuale, che sarebbe il nuovo numero di diapositive. Il codice è abbastanza semplice e autoesplicativo.

Per riprodurre il problema, 1. continuare a fare clic su Freccia successiva fino a raggiungere l'ultima diapositiva.
2. fare clic sul pulsante "Fai clic" per generare un nuovo numero casuale di diapositive.

La mia aspettativa era che la diapositiva tornasse alla prima diapositiva ma non rimanesse sulla pagina in cui era precedentemente. Ancora peggio, se il nuovo numero di diapositive è inferiore al numero precedente, l'utente vedrà una pagina vuota senza diapositive. Facendo clic su Errore precedente, lui/lei può andare alle diapositive precedenti e tutto funziona normalmente ma il display iniziale rovina l'esperienza dell'utente.

C'è qualcosa che mi manca nel codice, o si tratta di un bug?

Grazie, Abhi.

Answer 1

direi che è piuttosto un comportamento buggy, ma ancora è possibile ottenere ciò che si vuole forzando un ridisegno dopo nuova collezione è stata approvata come props, azzerando di key reagire:

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

UPDATED FIDDLE

Answer 2

Soluzione rapida: quando si passa a una nuova serie di diapositive, rimuovere il componente e ricostruirlo di nuovo. Inizierebbe quindi con la prima diapositiva. È possibile farlo incrementando l'attributo key di DemoSlider.

Per una correzione corretta, è necessario comunicare al componente di cambiare la "diapositiva corrente", in modo che non guardi all'indice della diapositiva oltre la fine, ma uno sguardo casuale alla sorgente al https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11.0/react-slick.js suggerisce che al momento non lo consente. È necessario apportare una modifica a InnerSlider.componentWillReceiveProps() per verificare state.currentSlide rispetto a props.slidesToShow e state.slideCount.

Sarebbe inoltre vantaggioso consentire di passare currentSlide come oggetti di scena.