Utilisation des instructions `if`
Apprenez à implémenter le rendu conditionnel dans vos composants React en utilisant les instructions JavaScript `if`. Découvrez comment structurer votre code pour afficher dynamiquement des éléments JSX selon des conditions spécifiques.
Le 'if' javascript classique au service de react
L'instruction `if` est un outil fondamental en JavaScript pour exécuter du code de manière conditionnelle. Dans le contexte de React, elle constitue une approche directe et souvent très lisible pour décider quel contenu afficher. Si vous avez une logique conditionnelle un peu complexe ou plusieurs cas à gérer, l'utilisation d'un `if` standard peut rendre votre composant plus facile à comprendre et à maintenir.
Contrairement à d'autres techniques comme l'opérateur ternaire ou l'opérateur logique `&&`, les instructions `if` ne peuvent pas être directement intégrées à l'intérieur des expressions JSX (entre les accolades `{}`). La raison est que JSX attend des *expressions* qui évaluent une valeur (un élément React, une chaîne, un nombre, `null`, etc.), tandis que `if` est une *instruction* qui ne produit pas directement de valeur.
Par conséquent, la stratégie consiste à utiliser l'instruction `if` *avant* l'instruction `return` de votre composant fonctionnel (ou dans la méthode `render` d'un composant classe). Vous pouvez déclarer une variable (par exemple, `contentToRender`) et lui assigner différents éléments JSX en fonction des conditions évaluées par vos blocs `if`, `else if` et `else`. Ensuite, vous incluez simplement cette variable dans le JSX retourné.
Mise en oeuvre pratique avec des exemples
Imaginons un composant `Greeting` qui doit afficher un message différent selon que l'utilisateur est connecté ou non. L'état de connexion pourrait être passé via une prop `isLoggedIn`.
Voici comment implémenter cela avec une instruction `if` :
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
let message;
if (isLoggedIn) {
message = Bienvenue !
;
} else {
message = Veuillez vous connecter.
;
}
return (
{message} // On affiche le contenu de la variable
);
}
// Utilisation :
// Cette approche est particulièrement utile lorsque la logique devient plus complexe. Par exemple, si nous avions plusieurs rôles d'utilisateur :
function UserDashboard(props) {
const userRole = props.role;
let content;
if (userRole === 'admin') {
content = En résumé, bien qu'elle ne s'intègre pas directement dans le JSX, l'instruction `if` est une méthode éprouvée et claire pour gérer le rendu conditionnel en React, surtout lorsque la logique de décision dépasse une simple alternative binaire. Elle favorise la séparation de la logique conditionnelle et de la structure du rendu final.