Utiliser plusieurs noms de classe dans React

Lors du développement d’applications complexes, il n’est pas rare d’avoir des éléments HTML avec plusieurs classes. Si vous êtes familier avec HTML et CSS, vous connaissez probablement la syntaxe pour définir plusieurs classes. Dans cet article, nous examinerons plusieurs façons différentes de le faire dans React.

Plusieurs noms de classe dans React

La plupart des développeurs React utilisent JSX, qui est une syntaxe spéciale pour écrire des définitions de composants simples. Sa syntaxe est très similaire à celle du HTML, c’est pourquoi il est préféré par la plupart des développeurs React. Il y a quelques différences essentielles qui concernent l’établissement des classes.

En HTML, vous êtes probablement habitué à définir des classes à l’aide de l’attribut class. Étant donné que les composants React peuvent être définis comme une instance d’une classe, Class est un mot réservé. Ainsi, les développeurs doivent utiliser l’attribut className à la place.

Dans JSX, les attributs className doivent être égaux aux chaînes. Une définition simple avec plusieurs classes ressemblerait à ceci :

<h1 className="classOne classTwo">Hi! Try edit me</h1>

Alternativement, l’attribut className peut être égal à une expression JavaScript qui renvoie une chaîne. Pour vous assurer que les expressions sont correctement interprétées comme du code JavaScript, vous devez les placer entre des accolades. Regardons un exemple :

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

Dans cet exemple, nous ajoutons une chaîne normale et une valeur de chaîne contenue dans une variable. Une fois l’expression évaluée, notre attribut className sera égal à la chaîne 'classOne white'.

Nous pouvons rendre l’expression plus lisible en remplaçant l’opérateur + par une méthode .concat(), qui combine deux chaînes en une seule.

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

React Méthode .join()

Cette méthode JavaScript standard est utile pour transformer un tableau de valeurs de chaîne en plusieurs valeurs className. Comme il s’agit d’une méthode JavaScript, nous devons placer une expression entière entre des accolades dans JSX.

Par défaut, les valeurs de chaîne combinées seront séparées par une virgule. Cependant, pour produire une liste valide de valeurs className, nous devons les séparer par un seul espace. Heureusement, nous pouvons spécifier le séparateur en passant une seule chaîne d’espacement ' ' comme argument de la méthode. Voici un exemple :

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

Dans notre fichier styles.css sur playcode, nous avons défini les trois classes :

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

Une fois que le code entre les accolades est exécuté, vous pouvez voir que les trois classes sont appliquées.

Vous pouvez également regarder dans le code source pour vérifier que les classes sont appliquées à l’élément <p>.

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

Fonction personnalisée dans React

Dans ES6, nous pouvons utiliser la syntaxe de déstructuration de tableau pour créer une fonction personnalisée élégante qui renvoie une chaîne formatée que nous pouvons utiliser comme valeur className.

Regardons le code :

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

Cette fonction traite ses arguments comme des éléments de tableau, puis utilise la méthode .join() pour renvoyer une liste formatée de valeurs className.

Lorsque vous utilisez la fonction, vous pouvez transmettre autant de valeurs de chaîne que vous le souhaitez.

className conditionnel dans React

L’application conditionnelle des valeurs className peut être utile pour modifier l’apparence d’un élément en fonction de la saisie de l’utilisateur. Par exemple, si votre application comporte des thèmes sombres et clairs, son arrière-plan doit également passer des tons clairs aux tons plus foncés. Voici un exemple de code :

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

La variable lightBackground se voit attribuer l’une des deux chaînes en fonction de la valeur de la propriété d’état darkTheme. En plus d’appeler la fonction classNameGenerator(""), nous utilisons également l’opérateur + pour inclure également la valeur conditionnelle de la variable.

Pour une meilleure démonstration, notre application playcode inclut un bouton pour basculer la valeur booléenne de la propriété darkTheme.