Contenu du cours
Maîtrise de React
Maîtrise de React
Défi : Rendu Conditionnel - Notification de Chat
Tâche : Création de Notification de Chat
Concevons un mécanisme pour afficher une notification uniquement lorsqu'un utilisateur a des messages non lus. Nous vérifierons si l'utilisateur a des messages non lus. Si cette condition est vraie, nous afficherons une notification indiquant le nombre de messages. Cependant, nous n'afficherons rien si l'utilisateur n'a pas de messages.
La tâche est :
Créez deux composants :
App
comme composant parent etNotification
comme composant enfant.Le composant parent,
App
, doit passer une prop appeléemessages
au composant enfant. La propmessages
est un tableau contenant des messages. Dans le composant enfant, vous devez vérifier la longueur du tableaumessages
.S'il y a des messages dans le tableau, affichez une chaîne qui dit :
You have <amount> of unread messages.
Le<amount>
doit être remplacé par le nombre réel de messages non lus.
Pour déterminer s'il y a des messages dans le tableau, nous pouvons vérifier sa
length
en utilisant la propriété length. La syntaxe est -array.length
.En React, nous utilisons l'opérateur
&&
pour implémenter la logique d'une instructionif
.Pour construire correctement la chaîne, remplacez le
amount
par la longueur réelle du tableau.Utilisez des accolades
{array.length}
pour définir la longueur du tableau dans la chaîne.
Merci pour vos commentaires !