Le rendu conditionnel fait référence à la modification du comportement d'une application en fonction de son état. Par exemple, vous pouvez changer le message d'accueil de votre application React en sombre pendant la nuit. De cette façon, vous avez un message d'affichage différent selon l'heure de la journée.

Le rendu conditionnel vous permet de rendre différents composants ou éléments React si une condition est remplie. Dans ce didacticiel, vous allez découvrir les différentes manières d'utiliser le rendu conditionnel dans les applications React.js.

Façons dont vous pouvez implémenter le rendu conditionnel

Pour suivre ces exemples, vous devez avoir une compréhension de base du fonctionnement de React. Si vous éprouvez des difficultés dans ce cas, ne vous inquiétez pas, nous avons un outil utile guide du débutant sur React.js.

Utilisation d'instructions conditionnelles

Comme en JavaScript, vous pouvez utiliser des instructions conditionnelles comme if…else pour créer des éléments lorsque certaines conditions sont remplies.

Par exemple, vous pouvez afficher un élément spécifié dans le si bloquer lorsqu'une condition est remplie et en afficher une autre dans autre bloquer si la condition n'est pas remplie.

Considérez l'exemple suivant qui affiche un bouton de connexion ou de déconnexion en fonction de l'état de connexion de l'utilisateur.

tableau de bord de fonction (accessoires) {
 const { isLoggedIn } = props
 si (est connecté){
 retourner Se déconnecter
 } autre{
 retourner Connexion
 }
}

Cette fonction rend un bouton différent selon le est connecté valeur passée comme accessoire.

En rapport: Comment utiliser les accessoires dans ReactJS

Alternativement, vous pouvez utiliser l'opérateur ternaire. L'opérateur ternaire prend une condition suivie du code à exécuter si la condition est la vérité suivi du code à exécuter si la condition est faux.

Réécrivez la fonction ci-dessus comme suit :

tableau de bord de fonction (accessoires) {
 const { isLoggedIn } = props
 retourner (
 <>
 {est connecté ?Se déconnecter:Connexion)
 )
}

L'opérateur ternaire rend la fonction plus propre et plus lisible par rapport à l'opérateur sinon déclaration.

Déclaration des variables d'élément

Les variables d'élément sont des variables qui peuvent contenir des éléments JSX et être rendues si nécessaire dans une application React.

Vous pouvez utiliser des variables d'élément pour afficher uniquement une certaine partie du composant lorsque votre application répond à la condition spécifiée.

Par exemple, si vous souhaitez afficher uniquement un bouton de connexion lorsque l'utilisateur n'est pas connecté et un bouton de déconnexion uniquement lorsqu'il est connecté, vous pouvez utiliser des variables d'élément.

fonction LoginBtn (accessoires) {
 retourner (

 Connexion

 );
}
fonction LogoutBtn (accessoires) {
 retourner (

 Se déconnecter

 );
}
fonction Tableau de bord() {
 const [connecté, setLoggedIn] = useState (vrai)
 const handleLogin = () => {
 setLoggedIn (vrai)
 }
 const handleLogout = () => {
 setLoggedIn (faux)
 }
 laissez bouton ;
 si (connecté) {
 bouton = 
 } autre {
 bouton = 
 }
 retourner (
 <>
 {connecté}
 )
}

Dans le code ci-dessus, créez d'abord les composants des boutons de connexion et de déconnexion, puis définissez les composant pour rendre chacun d'eux dans des conditions différentes.

Dans ce composant, utilisez le crochet d'état React pour savoir quand l'utilisateur est connecté.

En rapport: Maîtrisez vos compétences de réaction en apprenant ces crochets supplémentaires

Maintenant, selon l'état soit rendre le ou composant.

Si l'utilisateur n'est pas connecté, afficher le composant sinon rendre ee composant. Les deux fonctions de poignée modifient l'état de connexion lorsque le bouton respectif est cliqué.

Utilisation des opérateurs logiques

Vous pouvez utiliser la logique && Opérateur pour restituer conditionnellement un élément. Ici, un élément est rendu uniquement si la condition est évaluée à true, sinon il est ignoré.

Si vous souhaitez informer un utilisateur du nombre de notifications dont il dispose uniquement lorsqu'il reçoit une ou plusieurs notifications, vous pouvez utiliser ce qui suit.

fonction Afficher les notifications (accessoires) {
 const {notifications} = props
 retourner (
 <>
 {notifications.longueur > 0 &&

 Vous avez {notifications.length} notifications.


 }
 )
}

Ensuite, pour restituer un élément si l'expression logique && donne une valeur fausse, enchaînez le || logique opérateur.

La fonction suivante affiche le message « Vous n'avez aucune notification » si aucune notification n'est transmise en tant qu'accessoires.

fonction Afficher les notifications (accessoires) {
 const {notifications} = props
 retourner (
 <>
 {notifications.longueur > 0 &&

 Vous avez {notifications.length} notifications.
 || 
Vous n'avez aucune notification

 }
 )
}

Empêcher un composant de s'afficher

Pour masquer un composant même s'il a été rendu par un autre composant, renvoyez null au lieu de sa sortie.

Considérez le composant suivant qui n'affiche un bouton d'avertissement que si un message d'avertissement est transmis en tant qu'accessoires.

fonction Avertissement (accessoires) {
 const {warningMessage} = props
 si (! message d'avertissement) {
 retourner nul
 }
 retourner (
 <>
Avertissement
 )
}

Maintenant, si vous transmettez ‘warningMessage’ au composant, un bouton d'avertissement sera rendu. Cependant, si vous ne le faites pas, renverra null et le bouton ne sera pas affiché.

 // le bouton d'avertissement est rendu
 // le bouton d'avertissement n'est pas rendu

Exemples de rendu conditionnel dans des applications React réelles

Utilisez le rendu conditionnel pour accomplir différentes tâches dans votre application. Certains d'entre eux incluent le rendu des données de l'API uniquement lorsqu'elles sont disponibles et l'affichage d'un message d'erreur uniquement lorsqu'une erreur existe.

Rendu des données extraites d'une API dans React

La récupération de données à partir d'une API peut prendre un certain temps. Par conséquent, vérifiez d'abord s'il est disponible avant de l'utiliser dans votre application, sinon React générera une erreur s'il n'est pas disponible.

La fonction suivante montre comment vous pouvez restituer de manière conditionnelle les données renvoyées par une API.

fonction RécupérerDonnées() {
 const [données, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY" ;
 // Récupérer les données de l'API à l'aide d'Axios
 const fetchData = async () => {
 réponse const = attendre axios.get (apiURL)
 // Mettre à jour l'état avec les données
 setData (response.data) 
 }
 retourner (
 <>
Photo astronomie du jour

 {
 Les données && 
{données.titre}

{données.explication}

 }
 )
}

Dans la fonction ci-dessus, récupérez les données du API Apod de la NASA à l'aide d'Axios. Lorsque l'API renvoie une réponse, mettez à jour l'état et utilisez l'opérateur logique && pour n'afficher les données que lorsqu'elles sont disponibles.

En rapport: Comment utiliser les API dans React à l'aide de Fetch et d'Axios

Affichage des messages d'erreur

Dans les cas où vous souhaitez afficher une erreur uniquement lorsqu'elle existe, utilisez le rendu conditionnel.

Par exemple, si vous créez un formulaire et que vous souhaitez afficher un message d'erreur si un utilisateur a saisi le mauvais format d'e-mail, mettez à jour l'état avec le message d'erreur et utilisez une instruction if pour le rendre.

function afficheErreur() {
 const [erreur, setError] = useState (null)
 retourner (
 <>
 {
 si (erreur) {
Une erreur s'est produite: {error}

 }
 }
 )
}

Choisir ce qu'il faut utiliser dans votre application React

Dans ce didacticiel, vous avez découvert les différentes manières de restituer conditionnellement des éléments JSX.

Toutes les méthodes discutées donnent les mêmes résultats. Faites un choix sur ce qu'il faut utiliser en fonction du cas d'utilisation et du niveau de lisibilité que vous souhaitez atteindre.

7 meilleurs tutoriels gratuits pour apprendre React et créer des applications Web

Les cours gratuits sont rarement aussi complets et utiles - mais nous avons trouvé plusieurs cours React qui sont excellents et vous permettront de démarrer du bon pied.

Lire la suite

A propos de l'auteur