Ajouter plusieurs noms de classe au composant React

1. Utilisez la méthode Template Literals pour ajouter plusieurs classNames au composant React
2. Utilisez le package classNames pour ajouter plusieurs classNames au composant React
3. Utilisez le package classNames et la méthode .map pour ajouter plusieurs classNames au composant React
4. Conclusion

classNames dans React remplit la même fonction que les classes en JavaScript. Ils sont utilisés à la place des classes car class est un mot réservé dans React.

L’ajout de plusieurs classNames à un composant nous donne la possibilité de définir certaines conditions pour ce composant. Un className est utilisé pour définir le style ; l’autre est utilisé pour définir les conditions.

C’est idéal lorsque nous créons des pages Web qui auront des boutons.

De plus, nous pouvons souhaiter ajouter un style supplémentaire à un composant pour écraser le style d’origine dans certaines situations. L’ajout d’un className supplémentaire nous permet de le faire en douceur.

En outre, l’utilisation de plusieurs classNames pour définir le style facilite la lecture, le suivi et l’ajustement des fichiers CSS, car un seul className pourrait être surchargé avec trop de styles. De plus, dans les situations où plusieurs classes CSS ont des attributs similaires, nous devons créer une autre classe pour des attributs similaires pour faciliter les corrections et les ajouts.

Examinons différentes manières d’ajouter plusieurs classNames à un composant.

Utilisez la méthode Template Literals pour ajouter plusieurs classNames au composant React

Les littéraux de modèle, autrement appelés les chaînes de modèle, permettent aux utilisateurs de créer et de manipuler plusieurs expressions entourées de backticks, suivies du signe $ et des accolades.

Nous allons créer un exemple de page Web de bouton qui montre l’effet de plusieurs classNames en utilisant des styles CSS à côté. Naviguez jusqu’au fichier App.js de notre dossier de projet et écrivez ces codes :

Extrait de code - App.js :

import React from "react";
import "./App.css";
export default function App() {
  const [classNames, setClassNames] = React.useState(``);
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false);
  React.useEffect(() => {
    setClassNames(`${showRed ? "red" : ""} ${showBlue ? "blue" : ""}`);
  }, [showRed, showBlue]);
  return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames}>hit me!</div>
    </div>
  );
}

Les littéraux de modèle sont pratiques pour accueillir les classNames lorsque nous appelons les fonctions setClassNames. C’est là que nous arrivons à définir nos classes red et blue, respectivement.

Ensuite, nous ferons un peu de codage dans le fichier App.css :

Extrait de code - App.css :

.red {
  color: red;
}.blue {
  background-color: lightblue;
  width: 50px;
}

Production:

Nous avons utilisé l’écouteur d’événement button onClick pour dire à React quoi faire lorsque l’un ou l’autre des boutons est appuyé. Lorsque nous appuyons sur l’un des boutons, nous pouvons voir qu’un className est devenu actif, et lorsque nous appuyons sur l’autre bouton, l’autre className est invoqué et les couleurs changent.

Utilisez le package classNames pour ajouter plusieurs classNames au composant React

L’une des raisons pour lesquelles React est largement accepté est qu’il dispose d’une marge de manœuvre illimitée pour les développements potentiels et les ajustements, grâce à ses packages de dépendances.

Le package classNames est une autre méthode que nous pouvons appliquer pour ajouter plusieurs classNames à un composant. Cela nous aide à écrire moins de code que la méthode des littéraux de modèle et est mieux appliqué lorsqu’il s’agit de plus de deux classNames.

Une fois que nous avons créé notre dossier de projet, nous allons naviguer vers le dossier de projet toujours à l’intérieur de l’interne et installer le package classNames avec :

npm install classnames

Ensuite, nous commençons à coder, en commençant par le fichier App.js.

Nous utilisons le même style que le premier exemple. Nous ne répéterons pas l’extrait CSS ici.

Extrait de code - App.js :

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false); return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames({ red: showRed, blue: showBlue })}>
        hello
      </div>
    </div>
  );
}

Production:

Le package classNames est appliqué et enveloppé dans un div, où nous définissons les classNames pour chacun de nos composants, puis nous utilisons l’écouteur d’événement onClick pour modifier les états de chaque classe.

Nous pouvons voir que chaque className est activé/désactivé lorsque nous cliquons sur l’un des boutons attribués aux classes.

Utilisez le package classNames et la méthode .map pour ajouter plusieurs classNames au composant React

Si nous voulons appliquer le même style à plusieurs classes simultanément, nous pouvons utiliser le package classnames avec la méthode .map. La méthode .map est une fonction JavaScript qui nous aide à exécuter une fonction sur des éléments similaires.

Une fois que nous aurons créé notre dossier de projet, nous naviguerons jusqu’au dossier de projet toujours à l’intérieur de l’interne, et nous installerons le package classNames avec :

npm install classnames

Ensuite, nous procédons au codage ; d’abord, avec le fichier App.js :

Extrait de code - App.js :

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  return (
    <div>
      {["foo", "bar", "baz"].map(buttonType => (
        <button
          className={classNames({ [`btn-${buttonType}`]: showRed })}
          onClick={() => setShowRed(showRed => !showRed)}
        >
          Button {buttonType}
        </button>
      ))}
    </div>
  );
}

Après avoir déclaré nos classNames, la fonction .map mappe les trois classes sur l’objet buttonType. Cela nous permettra de transmettre la même fonction à plusieurs classes.

Ensuite, notre App.css ressemblera à ceci :

.btn-foo,
.btn-bar,
.btn-baz {
  color: red;
}

Production:

Nous avons attribué la même couleur à toutes les classes et l’écouteur d’événement onClick a activé cette fonction CSS lorsque nous avons basculé n’importe quel bouton.

Conclusion

Travailler avec plusieurs classes dans React nous permet d’essayer différentes combinaisons, nous avons donc différentes façons de contourner un obstacle. Et parce qu’il nous permettra d’appliquer plusieurs styles et conditions au sein d’un composant, le codage est beaucoup plus flexible et nous pouvons détecter les bogues et les erreurs avec une précision extrême.