Le rendu conditionnel est une fonctionnalité puissante de React qui permet aux développeurs de rendre les composants en fonction de certaines conditions.
C’est un concept fondamental qui joue un rôle crucial dans la construction d’applications web dynamiques et interactives.
Dans ce guide complet, nous allons plonger en profondeur dans le rendu conditionnel dans React, en couvrant les techniques de base et avancées avec des exemples pour une bonne compréhension.
Comprendre le rendu conditionnel dans React
Le rendu conditionnel dans React permet aux développeurs de contrôler dynamiquement le contenu affiché à l’écran en fonction de valeurs spécifiques qui peuvent être stockées dans une variable, un état ou des props.
Cela peut être extrêmement utile dans les scénarios où vous souhaitez afficher ou masquer certains éléments de l’interface utilisateur, modifier la mise en page d’une page ou rendre un contenu différent en fonction des interactions de l’utilisateur.
Le rendu conditionnel est important dans les applications React car il vous permet de créer des interfaces utilisateur dynamiques et interactives qui peuvent répondre aux données changeantes et aux interactions de l’utilisateur en temps réel.
Il contribuera à améliorer les performances et l’efficacité de vos applications en évitant le rendu inutile de composants ou d’éléments qui ne sont pas nécessaires.
Techniques de base pour le rendu conditionnel
Il existe plusieurs techniques de base que vous pouvez utiliser pour le rendu conditionnel dans React. Explorons chacune d’entre elles en détail.
Utilisation de l’instruction if pour le rendu conditionnel
L’une des façons les plus simples d’implémenter le rendu conditionnel dans React est d’utiliser l’instruction traditionnelle if.
if (condition) {
return <p>Expression 1</p>;
} else {
return <p>Expression 2</p>;
}L’instruction JavaScript if peut être utilisée dans la méthode render() de votre composant pour effectuer un rendu conditionnel du contenu en fonction d’une certaine condition.
Par exemple, vous pouvez utiliser l’instruction if pour afficher un spinner de chargement en attendant que les données se chargent :
import { useState, useEffect } from 'react';
import Spinner from './Spinner';
const MyComponent = () => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
// Fetch data from an API
fetch('https://example.com/data')
.then((response) => response.json())
.then((data) => {
setData(data);
setIsLoading(false);
});
}, []);
if (isLoading) {
return <Spinner />;
}
return <div>{/* Render the data here */}</div>;
};
export default MyComponent;Dans cet exemple, MyComponent récupère des données d’une API à l’aide du hook useEffect. En attendant le chargement des données, nous affichons un composant Spinner à l’aide de l’instruction if.
Un autre exemple peut être le rendu d’une interface utilisateur de secours lorsqu’une erreur se produit lors du rendu de votre composant :
const MyComponent = ({ data }) => {
if (!data) {
return <p>Something went wrong. Please try again later.</p>;
}
return <div>{/* Render the data here */}</div>;
};
export default MyComponent;Dans ce code, nous avons un MyComponent qui prend une propriété data. Si la propriété data est erronée, nous affichons un message d’erreur à l’aide de la déclaration if.
Enfin, vous pouvez afficher un contenu différent selon le rôle de l’utilisateur à l’aide de l’instruction if:
const MyComponent = ({ user }) => {
if (user.role === 'admin') {
return <p>Welcome, admin!</p>;
} else if (user.role === 'user') {
return <p>Welcome, user!</p>;
} else {
return <p>You are not authorized to access this page.</p>;
}
};
export default MyComponent;Dans ce code, nous avons un MyComponent qui prend une propriété user. En fonction de la propriété user.role, nous affichons un contenu différent à l’aide de l’instruction if.
Utilisation de l’opérateur ternaire pour le rendu conditionnel
Une autre façon concise d’implémenter le rendu conditionnel dans React est d’utiliser l’opérateur ternaire (?) dans JSX.
L’opérateur ternaire vous permet d’écrire une instruction if-else compacte en ligne en spécifiant 3 opérandes. Le premier opérande est la condition, tandis que les deux autres opérandes sont les expressions. Si la condition est true, la première expression sera exécutée ; sinon, la deuxième expression sera exécutée.
Par exemple, vous pouvez rendre différents composants en fonction d’une propriété :
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
const ExampleComponent = ({ shouldRenderComponentA }) => {
return (
<div>
{shouldRenderComponentA ? <ComponentA /> : <ComponentB />}
</div>
);
};
export default ExampleComponent;Dans ce code, nous avons un ExampleComponent qui prend une propriété appelée shouldRenderComponentA. Nous utilisons l’opérateur ternaire pour rendre conditionnellement ComponentA ou ComponentB en fonction de la valeur de la propriété.
Vous pouvez également rendre un texte différent en fonction d’un état :
import { useState } from 'react';
const ExampleComponent = () => {
const [showMessage, setShowMessage] = useState(false);
return (
<div>
<button onClick={() => setShowMessage(!showMessage)}>
{showMessage ? 'Hide message' : 'Show message'}
</button>
{showMessage ? <p>Hello, world!</p> : null}
</div>
);
};
export default ExampleComponent;Dans cet exemple, nous utilisons l’opérateur ternaire pour rendre un texte différent en fonction de la valeur de l’état showMessage. Lorsque vous cliquez sur le bouton, la valeur de showMessage est modifiée et le texte est affiché ou masqué en conséquence.
Enfin, vous pouvez afficher une barre de chargement pendant que les données sont récupérées :
import { useState, useEffect } from 'react';
import Spinner from './Spinner';
const ExampleComponent = () => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const jsonData = await response.json();
setData(jsonData);
setIsLoading(false);
};
fetchData();
}, []);
return (
<div>
{isLoading ? <Spinner /> : <p>{data.title}</p>}
</div>
);
};
export default ExampleComponent;Dans cet exemple, nous utilisons l’opérateur ternaire pour rendre conditionnellement une barre de chargement pendant que des données sont extraites d’une API. Une fois les données disponibles, nous rendons la propriété title à l’aide de l’opérateur ternaire.
Utilisation des opérateurs logiques AND et OR pour le rendu conditionnel
Vous pouvez également utiliser les opérateurs logiques AND (&&) et OR (||) pour mettre en œuvre le rendu conditionnel dans React.
L’opérateur logique AND vous permet d’effectuer le rendu d’un composant uniquement si une certaine condition est vraie, tandis que l’opérateur logique OR vous permet d’effectuer le rendu d’un composant si l’une ou l’autre des conditions est vraie.
Ces opérateurs sont utiles lorsque vous avez des conditions simples qui déterminent si un composant doit être rendu ou non. Par exemple, si vous souhaitez rendre un bouton uniquement si un formulaire est valide, vous pouvez utiliser l’opérateur logique AND comme suit :
import { useState } from 'react';
const FormComponent = () => {
const [formValues, setFormValues] = useState({ username: "", password: "" });
const isFormValid = formValues.username && formValues.password;
const handleSubmit = (event) => {
event.preventDefault();
// Submit form data
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={formValues.username}
placeholder="Type Username..."
onChange={(e) =>
setFormValues({ ...formValues, username: e.target.value })
}
/>
<br />
<input
type="password"
value={formValues.password}
placeholder="Type Password..."
onChange={(e) =>
setFormValues({ ...formValues, password: e.target.value })
}
/>
{isFormValid && <button type="submit">Submit</button>}
</form>
);
};
export default FormComponent;Dans cet exemple, nous avons un site FormComponent qui contient un formulaire avec deux champs de saisie pour username et password. Nous utilisons le crochet useState pour gérer les valeurs du formulaire et la variable isFormValid pour vérifier si les deux champs de saisie ont des valeurs. En utilisant l’opérateur logique ET (&&), nous ne rendons le bouton de soumission que si isFormValid est vrai. Cela garantit que le bouton n’est activé que lorsque le formulaire est valide.
De même, vous pouvez utiliser l’opérateur OR pour afficher un message de chargement si les données sont toujours en cours de chargement ou un message d’erreur si une erreur se produit :
import React, { useEffect, useState } from 'react';
const DataComponent = () => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [errorMessage, setErrorMessage] = useState('');
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
} catch (error) {
setErrorMessage('An error occurred while fetching data.');
} finally {
setIsLoading(false);
}
};
fetchData();
}, []);
return (
<>
{errorMessage || isLoading ? (
<p>{errorMessage || 'Loading...'}</p>
) : (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</>
);
};
export default DataComponent;Dans cet exemple, un site DataComponent récupère des données d’une API à l’aide de fetch et les affiche dans une liste. Nous utilisons le crochet useState pour gérer les données, l’état de chargement et le message d’erreur. En utilisant l’opérateur logique OR (||), nous pouvons afficher un message de chargement ou un message d’erreur si l’une ou l’autre de ses conditions est vraie. Cela garantit que l’utilisateur voit un message indiquant l’état actuel du processus de récupération des données.
L’utilisation des opérateurs logiques AND et OR pour le rendu conditionnel dans React est une manière concise et lisible de traiter des conditions simples. Cependant, il est préférable d’utiliser d’autres approches comme les déclarations switch pour une logique plus complexe.
Techniques avancées pour le rendu conditionnel
Le rendu conditionnel dans React peut être plus complexe en fonction des exigences de votre application. Voici quelques techniques avancées que vous pouvez utiliser pour le rendu conditionnel dans des scénarios plus complexes.
Utilisation des instructions Switch pour le rendu conditionnel
Bien que les instructions if et les opérateurs ternaires soient des approches courantes pour le rendu conditionnel, il arrive qu’une instruction switch soit plus appropriée, en particulier lorsqu’il s’agit de conditions multiples.
Voici un exemple :
import React from 'react';
const MyComponent = ({ userType }) => {
switch (userType) {
case 'admin':
return <p>Welcome, admin user!</p>;
case 'user':
return <p>Welcome, regular user!</p>;
default:
return <p>Please log in to continue.</p>;
}
};
export default MyComponent;Dans ce code, une instruction switch est utilisée pour effectuer un rendu conditionnel du contenu en fonction de l’instruction userType. Cette approche peut s’avérer utile lorsqu’il s’agit de conditions multiples et offre une manière plus organisée et plus lisible de gérer une logique complexe.
Rendu conditionnel avec React Router
React Router est une bibliothèque populaire pour gérer le routage côté client dans les applications React. React Router vous permet d’effectuer un rendu conditionnel des composants en fonction de l’itinéraire actuel.
Voici un exemple de mise en œuvre du rendu conditionnel à l’aide de React Router :
import { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import NotFound from './components/NotFound';
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login">
<Login setIsLoggedIn={setIsLoggedIn} />
</Route>
{isLoggedIn ? (
<Route path="/dashboard" component={Dashboard} />
) : (
<Route component={NotFound} />
)}
</Switch>
</Router>
);
};
export default App;Dans ce code, nous utilisons l’état isLoggedIn pour rendre conditionnellement soit le composant Dashboard si l’utilisateur est connecté, soit le composant NotFound si l’utilisateur n’est pas connecté. Le composant Login définit l’état isLoggedIn sur true une fois que l’utilisateur s’est connecté avec succès.
Notez que nous utilisons la propriété des enfants du composant <Route> pour transmettre le composant Login et la fonction setIsLoggedIn. Cela nous permet de transmettre des éléments au composant Login sans les spécifier dans la propriété path.
Résumé
Le rendu conditionnel est une technique puissante de React qui vous permet de mettre à jour dynamiquement l’interface utilisateur en fonction de différentes conditions.
En fonction de la complexité de la logique de l’interface utilisateur de votre application, vous pouvez choisir l’approche qui répond le mieux à vos besoins.
N’oubliez pas de garder votre code propre, organisé et lisible, et de toujours tester minutieusement votre logique de rendu conditionnel pour vous assurer qu’elle fonctionne comme prévu dans différents scénarios.
Vous cherchez la solution d’hébergement idéale pour vos applications React ? Essayez gratuitement l’hébergement d’applications de Kinsta!
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire