Vervollständigen Sie eine Bildkarussellkomponente mit React

Dieses Mal werde ich Ihnen vorstellen, wie Sie React zum Vervollständigen einer Bildkarussellkomponente verwenden. Was sind die Vorsichtsmaßnahmen, um React zum Vervollständigen einer Bildkarussellkomponente zu verwenden? Ein praktischer Fall. Stehen Sie auf und schauen Sie sich das an.

Verwenden Sie React, um die oben genannten Funktionen zu implementieren. Teilen Sie zunächst die Komponenten auf:

<SlideMS> <SlideM/>
 <SlideS/><SlideMS/>

Die Komponente SlideM stellt die mittlere Bildkomponente dar. Dies behält immer einen Status bei: aktuellMIndex, der der Indexwert des aktuellen chinesischen Bildes ist.
Die Komponente SlideS stellt die Kleinbildkomponente dar und muss zwei Zustände beibehalten: currentSIndex und currentSPage, dh den Indexwert des aktuellen Kleinbildbilds und die aktuelle Seitennummer des Kleinbilds

Die äußere Komponente SlideMS akzeptiert mehrere Parameter als Requisiten:

<SlideMS     mediumImageArr={mediumImageArr}    eachMediumImgWidth = {616}    smallImageArr={smallImageArr}     eachSmallImgWidth = {82}/>, document.getElementById(&#39;js-img-slide&#39;));
SlideM、SlideS再从SlideMS中获取参数进行内部渲染。
<SlideM     mediumImageArr={mediumImageArr}    currentMIndex={currentMIndex}    eachMediumImgWidth = {eachMediumImgWidth}    callback={(index)=>{self.setSmallIndex(index)}} /><SlideS      smallImageArr={smallImageArr}      currentSIndex={currentSIndex}      eachSmallImgWidth={eachSmallImgWidth}      eachMediumImgWidth = {eachMediumImgWidth}      callback={(index)=>{self.setMediumIndex(index)}}/>

Wenn der Schalter auf die Schaltfläche des mittleren Bilds geklickt wird, wird der Bildversatz berechnet und dann der neue currentMIndex übergeben Die übergeordnete Komponente und die übergeordnete Komponente setState benachrichtigen die beiden untergeordneten Komponenten. currentMIndex hat sich geändert. In der kleinen Bildkomponente sind viele Berechnungen erforderlich, zum Beispiel: Berechnen Sie, wie viele kleine Bilder, die eine Seite hat, basierend auf der gegebenen Breite des mittleren Bildes, und berechnen Sie die Gesamtzahl der Seiten kleiner Bilder, bestimmen Sie, auf welcher Seite sich das Miniaturbild befindet, basierend auf dem gegebenen Indexwert usw.

Wenn Sie auf die linken und rechten Pfeile der kleinen Bildkomponente klicken, berechnen Sie den Versatz des Bildes (berechnen Sie zuerst, wie viele kleine Bilder ein mittleres Bild enthält), und dann ändert setState den Wert von currentSPage des kleinen Bildes. Die übergeordnete Komponente setState benachrichtigt die beiden Unterkomponenten darüber, dass sich der aktuelle MIndex geändert hat.

Nachdem die mittlere Bild- und die kleine Bildkomponente die neuen Wertänderungen in „componentWillReceiveProps“ erhalten haben, setzen sie State zurück und aktualisieren somit den Status innerhalb der Komponente Erreichung der beiden Kommunikation zwischen Personen.

Das Obige ist eine Idee zur Umsetzung. In tatsächlichen Anwendungen ist die Szene möglicherweise komplizierter. Wenn Sie beispielsweise auf das erste Bild klicken, können Sie in den Großbildmodus wechseln normal gedreht werden, und wenn der Großbildmodus ausgeschaltet ist, lokalisieren das mittlere Bild und das kleine Bild automatisch das zuletzt angezeigte Bild. Dies erfordert etwas komplexere Vorgänge und die Kompatibilität muss auf dieser Grundlage erfolgen.

Ein sehr peinlicher Punkt: Der

Animationseffekt

während des Bildkarussells verwendet immer noch die Animation von jquery.

Das obige ist der detaillierte Inhalt vonVervollständigen Sie eine Bildkarussellkomponente mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!