Utilisation de l'instruction Switch dans un composant React

1. Comment utiliser switch dans React (JSX)
2. Alternatives à switch() dans React
3. Résumé

L’instruction switch est l’une des fonctionnalités les plus utiles de JavaScript.

Il est parfait pour définir des conditions et renvoyer une valeur spécifique selon que ces conditions sont remplies ou non. Dans React, une instruction switch est l’un des meilleurs moyens de gérer le rendu conditionnel.

Par exemple, vous souhaiterez peut-être rendre un composant spécifique en fonction des entrées des utilisateurs. Vous pouvez stocker la valeur des champs input dans l’état et examiner la valeur de l’état pour déterminer le bon composant à afficher.

La plupart des développeurs React utilisent JSX pour définir des composants et les invoquer. À première vue, JSX ressemble beaucoup à HTML, il est donc facile à lire et à apporter des modifications chaque fois que nécessaire.

Cela nous permet également d’utiliser des expressions JavaScript dans le code JSX. Cependant, sa prise en charge est limitée aux expressions JavaScript et ne s’étend pas aux instructions telles que for ou switch.

Lisez ce guide pour en savoir plus sur les différences entre les déclarations et les expressions.

Cet article discutera de plusieurs façons d’utiliser switch() (ou ses remplacements valides) dans JSX.

Comment utiliser switch dans React (JSX)

JSX est une syntaxe React qui nous permet de créer des composants et des éléments d’interface utilisateur sans utiliser la fonction .createElement(). Il possède également de nombreuses fonctionnalités supplémentaires que HTML n’a pas.

Par exemple, vous pouvez écrire du code JavaScript normal dans JSX. Il suffit de mettre les expressions entre accolades.

Regardons un exemple :

class App extends Component {
  render() {
    return <h1>Two plus two is {2+2}</h1>;
  }
}

Ici, nous avons un composant qui renvoie un seul élément d’en-tête.

Comme vous pouvez le voir dans le playcode, le 2+2 est traité comme une expression JavaScript valide car il est placé entre deux accolades. Il s’agit d’une simple démonstration d’une fonctionnalité convaincante.

Lors du développement d’applications React, c’est une bonne idée d’éviter de mettre trop de logique dans votre structure JSX. Ceci est nécessaire pour éviter d’encombrer votre code.

Au lieu de cela, vous pouvez définir une fonction ou une variable en dehors de l’instruction return et la référencer dans votre code JSX.

Les développeurs ne peuvent pas écrire d’instructions switch directement dans le JSX. Premièrement, ce serait trop long et, plus important encore, les instructions ne sont pas prises en charge dans JSX.

switch en dehors de la déclaration de retour

La solution la plus optimale est probablement de retirer entièrement switch() de votre instruction return. Ensuite, vous pouvez utiliser le JavaScript standard sans aucune restriction et référencer la fonction qui inclut l’instruction switch.

Regardons un exemple :

class App extends Component {
  render() {
    const functionWithSwitch = (parameter) => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    }
    return <h1>{functionWithSwitch("positive")}</h1>;
  }
}

Dans cet exemple, nous avons une simple fonction functionWithSwitch() qui inclut l’instruction switch et renvoie trois valeurs différentes en fonction de la valeur du paramètre. Au lieu de définir tout cela dans JSX, nous le faisons séparément, référençons la fonction et la transmettons à la valeur souhaitée.

Commutateur en ligne

Nous avons mentionné précédemment qu’il est impossible d’utiliser switch directement dans JSX, mais il existe des moyens de contourner cette règle.

Pour certaines personnes, les solutions en ligne sont plus faciles à lire et à comprendre ce qui se passe. Vous n’avez pas besoin de déplacer votre attention d’avant en arrière sur la définition de la fonction et l’appel pour comprendre ce qui se passe.

Techniquement, cette solution n’est pas un interrupteur, mais elle fonctionne exactement de la même manière. Regardons un exemple :

class App extends Component {
  render() {
    return <h1>
          {
        	{
          'positive': '+',
          'negative': '-'
        	}[param]
      	  }   
      </h1>;
  }
}

Ici, nous utilisons un objet JavaScript simple pour restituer une chaîne de manière conditionnelle. Dans ce cas, il a deux propriétés avec deux valeurs. En fin de compte, vous obtiendrez une valeur de la propriété que vous référencez en tant que param.

Pour configurer un cas par défaut avec cette approche, vous devez utiliser l’opérateur logique OU (||).

Fonction d’appel automatique

Si nécessaire, vous pouvez également mettre tout le code lié au switch dans une fonction et l’invoquer automatiquement dans JSX. C’est une solution un peu longue, mais elle peut être nécessaire à certaines occasions.

Regardons un exemple :

class App extends Component {
  render() {
    return <h1>{( () => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    })()}</h1>;
  }
}

Nous avons pris l’exemple de fonction précédent et l’avons immédiatement invoqué pour renvoyer une valeur. Encore une fois, il existe de meilleures façons d’utiliser les instructions switch dans JSX, mais cela reste une bonne solution.

Switch d’éléments personnalisés

La popularité de React peut être largement attribuée à ses composants réutilisables.

La création d’un composant Switch personnalisé vous évitera d’avoir à écrire une logique en ligne complexe. De plus, vous n’aurez pas à aller et venir pour comprendre ce que fait une fonction.

Le composant personnalisé <Switch /> prendra un accessoire, et en fonction de sa valeur ; il rendra l’un des composants enfants placé entre les balises d’ouverture et de fermeture du composant Switch.

Regardons un exemple :

let SwitchComponent = props => {
    const {condition, childrenElements} = props
    return childrenElements.find(element => {
        return element.props.value === condition
    })
}

Nous pouvons invoquer un composant <Switch> et ajouter des enfants avec des valeurs personnalisées dans le composant parent. Ceci est similaire à la façon dont vous écrivez différents cas dans l’instruction switch.

Prenons un exemple, basé sur l’instruction switch que nous avons écrite précédemment :

<Switch test="positive">
<p value={"positive"}>+</p>
<p value={"negative"}>-</p>
</Switch>

Dans ce cas, en raison de la valeur de la prop test, le composant Switch ne rendra l’élément de paragraphe qu’avec une valeur positive.

Alternatives à switch() dans React

Les développeurs de React utilisent souvent un opérateur ternaire pour une logique conditionnelle simple, qui prend une condition et renvoie l’un ou l’autre des composants en fonction de la condition. L’opérateur ternaire peut être écrit directement entre accolades à l’intérieur de JSX ; il est simple, facilement lisible et utile.

Regardons notre exemple et écrivons la même condition en utilisant l’opérateur ternaire :

<h1>{condition === "positive" ? "+" : "-"}</h1>

C’est une solution relativement simple. Bien sûr, cela a ses limites et ne fonctionnerait pas avec une logique plus complexe.

Résumé

Cet article décrit de nombreuses façons différentes de rendre un composant de manière conditionnelle. Toutes ces solutions sont des options valables, et votre choix devrait finalement dépendre de vos propres préférences ou de celles de votre équipe.