PC & Mobile

TypeScript avancé par exemple: React Form Carousel

TypeScript avancé par exemple: React Form Carousel


Comme StageButtonNous parcourons aussi FormCarouselDes s props.stages et restituer les formulaires appropriés, ainsi que l'animation requise pour l'entrée et la sortie du formulaire.

La boucle ressemble au JSX intégré suivant:

// rendu des formulaires en ligne JSX

{this.props.stages.map ((stage: FormCarousel_Stage, i: number) => {
Const Forme: React.ComponentType =
stage.form;
revenir (

)
})}

Remarquez comment nous saisissons stage.form et en tapant le nouvel objet comme React.ComponentType. Ceci est nécessaire pour dire au compilateur Typescript exactement ce que stage.form est. Nous rendons ensuite Forme en tant qu'élément JSX avec tous les accessoires requis.

le FormCarousel_Form interface définit les accessoires dont chaque composant a besoin, les 4 propriétés en gras étant importantes pour notre formulaire:

interface d'exportation FormCarousel_Form {
className: string;
numéro d'index;
numéro de clé;
setCompleted (index: number, complétée: boolean): void;
toggleStage (index: number): void;
transition: StageTransition;
}

Parallèlement aux deux méthodes du carrousel, nous définissons le stade de la forme. indice et requis clé prop de l'itérable - les deux étant identiques.

transition est la propriété intéressante ici - il a un type spécifique qui limite les valeurs qu'il peut accepter. Voyons cela plus loin.

Animation d'image clé de transition de scène

le StageTransition le type définit tous les possibles transition valeurs, qui déterminent quelle animation d’image clé a réellement lieu pour une étape:

type d'exportation StageTransition = 
'stage_in_left' | 'stage_out_left' |
'stage_in_right' | 'stage_out_right' |
'aucun';

StageTransition est un type littéral de chaîne qui définit les noms d'animation d'images clés acceptés par la transition. Une étape peut entrer ou sortir, de gauche ou de droite. Nous pouvons en effet calculer la transition correcte en nous référant simplement à l’indice de niveau actif et à l’indice de stade précédent.

C’est exactement ce qui a été fait dans le transition prop, en intégrant simplement plusieurs expression ? vrai faux déclarations pour déterminer la transition d’étape résultante:

Cela aurait également pu être fait en tant que cluster d'instructions if-else, mais cette méthode nous permet de maintenir la syntaxe au minimum - et de la conserver en tant que JSX en ligne.

Au fur et à mesure que vos animations deviennent plus complexes, vous souhaiterez peut-être créer votre propre classe de contrôleur d'animation au lieu d'intégrer cette logique comme accessoire! Dans tous les cas, le bloc ci-dessus indique:

  • Si la activeStage l'indice est inférieur à la stageOut index, transition activeStage de gauche, sinon transition activeStage de la droite
  • Si la activeStage l'indice est inférieur à la stageOut index, transition stageOut à droite, sinon transition stageOut à gauche
  • Appliquer uniquement les transitions à activeStage et stageOut index. Toutes les autres étapes reçoivent un aucun transition

L'autre accessoire que nous n'avons pas mentionné, nom du cours, tiendra une valeur de caché pour toutes les étapes qui ne sont pas activeStage ou stageOut:

<Formulaire
className = {
this.state.activeStage! == i && this.state.stageOut! == i
? `caché`
: ``
}
...
/>

Avec cette logique en place, nous veillons à ce que seules les deux étapes de transition en entrée et en sortie soient affichées, les étapes restantes étant masquées.

Maintenant, l'animation d'image clé elle-même est définie dans Stage.tsx, un composant stylé qui définit tous nos CSS liés aux formulaires et les enveloppe.

le transition prop est d'abord passé dans le composant stylé:

// à partir de n'importe quel composant de formulaire (Détails, Bio, Soumettre)
...

Maintenant que le composant est conscient de la transition correcte, il peut être intégré à la animation propriété. Notez aussi comment notre Transition d'état les valeurs littérales de chaîne correspondent aux noms d'animation d'images clés:

Ceci conclut la solution d'animation du carrousel. Pour récapituler, seuls l’étape active et l’étape sortante doivent être affichées et sont accompagnées d’une animation entrante et sortante.

Il ne reste plus qu'à visiter les formulaires eux-mêmes, gérés via Formik via le avecFormik () HOC.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close