Le rendu conditionnel est l'un des plus couramment utilisés dans React. Au fur et à mesure que l'application se développe et que les choses deviennent complexes, les instructions de rendu conditionnel peuvent devenir moins lisibles. Dans cet article, nous verrons comment écrire facilement de belles conditions dans React.

Techniques courantes de rendu conditionnel

Voici quelques techniques utilisées lors de l'application du rendu conditionnel dans les composants React :

En utilisant &&

C'est l'une des techniques les plus couramment utilisées pour le rendu conditionnel. Il est important de se rappeler que cette technique doit être utilisée avec beaucoup de prudence car elle peut entraîner des bogues imprévisibles.

Utilisation des instructions If/Else

Une autre technique de rendu conditionnel dans React consiste à utiliser des instructions if/else. Cela peut entraîner un code de composant complexe lorsqu'il y a plusieurs conditions à vérifier.

Utilisation de l'opérateur ternaire

L'opérateur ternaire est une technique populaire utilisée pour le rendu conditionnel dans React. Le problème avec l'utilisation de l'opérateur ternaire est que lorsque vous avez plusieurs conditions à vérifier, cela conduit à l'utilisation de l'opérateur ternaire imbriqué. Cela peut rendre le code moins lisible et complexe.

Écrire des conditions propres

Présentation de , un composant React simple et minuscule qui vous permet d'écrire de belles conditions dans React. Cela vous permettra d'écrire rapidement du code de rendu conditionnel lisible dans React. Que vous ayez besoin de tester une seule condition ou une série de conditions, vous pouvez le faire avec .

Le composant fonctionne de la même manière que les instructions if/else et switch/case. Il vous permet de vérifier une série de conditions pour le rendu conditionnel dans React.

Dans l'exemple ci-dessus, le code affiche un message basé sur les jours de la semaine. La dernière condition est toujours vraie, mais elle ne sera rendue que lorsque toutes les conditions ci-dessus échoueront. Cela fonctionne exactement comme l'instruction switch/case par défaut .

Le composant accepte la propriété isTrue , vous permettant d'implémenter des conditions imbriquées. Cela signifie que toutes les conditions enfants seront vérifiées uniquement si la condition transmise dans est évaluée à true.

Découvrez ce petit composant React ici sur GitHub .

Créer des applications Web composables

Ne construisez pas de monolithes Web. Utilisez Bit pour créer et composer des composants logiciels découplés - dans vos frameworks préférés comme React ou Node. Créez des applications évolutives et modulaires avec une expérience de développement puissante et agréable.

Amenez votre équipe à Bit Cloud pour héberger et collaborer sur des composants ensemble, et accélérer, faire évoluer et normaliser le développement en équipe. Essayez les interfaces composables avec un système de conception ou des micro-interfaces , ou explorez le backend composable avec des composants côté serveur .

Essayez-le →

Apprendre encore plus