Aller au contenu

JSX : syntaxes courantes

Conditions

On ne peut pas inclure facilement une instruction if en contexte JSX, il faut obligatoirement une expression Javascript.

  • if ... then ... else : utiliser l'opérateur ternaire ?: :
condition ? valeur_si_vrai : valeur_si_faux

{isMAtin ? <Matin/> : <ApresMidi/>}
  • if ... then : on peut généralement utiliser les propriétés de court-circuit du ET logique :
{isLoading && <Text>Loading</Text>}
  • On peut utiliser le OU logique pour remplacer une valeur fausse :
{nom || '(pas de nom)'}

(peut être lu comme : "afficher le nom, ou sinon la chaîne '(pas de nom)'")

Boucles

De même que pour le if, on ne peut pas intégrer une instruction for ou while, il faut passer par une expression. On utilise généralement pour cela la fonction map.

{maList.map(item => (element_a_afficher))}

Note : les éléments générés doivent être munis d'un attribut key unique (c'est une contrainte de React).

Exemple : afficher une liste d'objets seulement si elle est non vide :

{maListe.length && <ul>
  maListe.map(item => <li key={item.id}>{item.label}</li>)
</ul>}

Génération d'un index

Si on a besoin de numéroter les éléments de la liste, par exemple parce que "item" ne fournit pas de clé unique, appeler map avec un second argument :

{maListe && <ul>
  maListe.map((item, index) => <li key={index}>{item}</li>)
</ul>}

Commentaires

Un commentaire JSX est la combinaison d'un bloc {} et d'un commentaire Javascript /* ... */ :

{/* Ceci est un commentaire */}

Espaces blancs

On les utilise typiquement en fin de ligne. Contrairement au HTML, un saut de ligne en JSX ne génère pas un espace blanc.

En React classique

Le plus simple est d'utiliser {' '} :

{nom}{' '}
{prenom}

En React Native

Dans les situations où on ne peut pas include du texte directement utiliser :

<Text> </Text>