Composant ReactJS Reactstrap Collpase

Reactstrap est une bibliothèque frontale populaire qui est facile à utiliser avec les composants React Bootstrap 4. Cette bibliothèque contient les composants React sans état pour Bootstrap 4. Le composant Collapse est utilisé comme zone de contenu qui peut être réduite et développée. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant ReactJS Reactstrap Collapse.

Collpaser les accessoires :

• dansOuvert : Il est utilisé pour montrer le composant.
• enfants: Il est utilisé pour passer l’élément children à ce composant.
• étiqueter: Il est utilisé pour désigner la balise de notre composant de réduction.
• nom du cours: Il est utilisé pour désigner le nom de la classe pour le style.
• barre de navigation : Il est utilisé pour indiquer s’il est associé ou non au composant de la barre de navigation.
• Module css : Il est utilisé pour désigner le module CSS pour le style.
• réf.interne : Il est utilisé pour désigner l’élément de référence interne.
• mountOnEnter : Il sert à monter le composant en attendant le premier Entrer la transition est déclenchée.
• unmountOnExit : Il est utilisé pour démonter le composant.
• apparaître: Lorsque le composant est monté, il est utilisé pour exécuter l’animation de réduction.
• Entrer: Il est utilisé pour activer ou désactiver les transitions d’entrée
• sortir: Il est utilisé pour activer ou désactiver les transitions de sortie
• temps libre: Il est utilisé pour indiquer la durée de l’animation de repli en millisecondes.
• addEndListener : Il est utilisé pour désigner une fonction qui écoute un événement de fin.
• surEntrée : C’est une fonction de rappel qui est déclenchée avant que le composant ne s’effondre.
• onEntré : Il s’agit d’une fonction de rappel qui est déclenchée après la réduction du composant has.
• En entrant: Il s’agit d’une fonction de rappel qui est déclenchée une fois que le composant commence à s’effondrer.
• à la sortie : C’est une fonction de rappel qui est déclenchée avant que le composant ne s’effondre.
• onExited : Il s’agit d’une fonction de rappel qui est déclenchée une fois que le composant s’est replié.
• onSortie : Il s’agit d’une fonction de rappel qui est déclenchée une fois que le composant commence à s’effondrer.
• classe de base : Il est utilisé pour désigner la classe qui est toujours appliquée à l’élément collapse.
• baseClassActive : Il est utilisé pour désigner la classe appliquée à l’élément de repli lorsqu’il est dans un état actif.

Création de l’application React et installation du module :

Étape 1: Créez une application React à l’aide de la commande suivante :

npx create-react-app nom de dossier

Étape 2: Après avoir créé votre dossier de projet, c’est-à-dire le nom du dossier, déplacez-vous dessus à l’aide de la commande suivante :

nom de dossier cd

Étape 3: Après avoir créé l’application ReactJS, installez le obligatoire module à l’aide de la commande suivante :

npm installer reactstrap bootstrap

Structure du projet : Cela ressemblera à ce qui suit.

Structure du projet

Exemple: Maintenant, écrivez le code suivant dans le App.js déposer. Ici, App est notre composant par défaut où nous avons écrit notre code.

Javascript