Compléter un composant de carrousel d'images à l'aide de React

Cette fois, je vais vous présenter comment utiliser React pour compléter un composant carrousel image Quelles sont les précautions pour utiliser React pour compléter un composant carrousel d'images. un cas pratique. Levez-vous et jetez un œil.

Utilisez React pour implémenter les fonctions ci-dessus. Tout d'abord, divisez les composants :

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

Le composant SlideM représente le composant d'image du milieu, qui maintient toujours un état : currentMIndex, qui est la valeur d'index de l'image chinoise actuelle.
Le composant SlideS représente le composant petite image et doit conserver deux états : currentSIndex et currentSPage, c'est-à-dire la valeur d'index de l'image petite image actuelle et le numéro de page actuel de la petite image

Le composant externe SlideMS accepte plusieurs paramètres comme accessoires :

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

Lorsque l'on clique sur le bouton de l'image du milieu, le décalage de l'image est calculé, puis le nouveau currentMIndex est transmis à le composant parent et le composant parent setState informe les deux enfants Le composant currentMIndex a changé

De nombreux calculs sont impliqués dans le composant petite image. Vous pouvez utiliser ces méthodes d'extraction, par exemple : calculer le nombre de petites images. images d'une page en fonction de la largeur donnée de l'image moyenne et calculer le nombre total de pages de petites images, déterminer sur quelle page se trouve la vignette en fonction de la valeur d'index donnée, etc.

Lorsque vous cliquez sur les flèches gauche et droite du composant petite image, calculez le décalage de l'image (calculez d'abord le nombre de petites images qu'il y a dans une image moyenne), puis setState modifie la valeur du currentSPage de la petite photo. Le composant parent setState informe les deux sous-composants que le currentMIndex a changé ;

Une fois que les composants d'image moyenne et de petite image ont reçu respectivement les nouvelles modifications de valeur dans ComponentWillReceiveProps, ils ont réinitialisé State et mis à jour l'état à l'intérieur du composant, ainsi réaliser les deux communications entre les personnes.

Ce qui précède est une idée de mise en œuvre. Dans les applications réelles, la scène sera plus compliquée. Par exemple, la première image peut nécessiter la lecture d'une vidéo, et lorsque l'on clique sur l'image du milieu, elle peut passer en mode grande image. être pivoté normalement, et lorsque le mode grande image est désactivé, l'image moyenne et la petite image localiseront automatiquement la dernière image affichée à l'instant. Cela impliquera des opérations légèrement plus complexes et la compatibilité doit être effectuée sur cette base.

Un point très gênant : l'effet animation lors du carrousel d'images utilise toujours l'animate de jquery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!