Herausforderung: Bedingte Darstellung - Chat-Benachrichtigung

Aufgabe: Erstellung einer Chat-Benachrichtigung

Lassen Sie uns einen Mechanismus entwickeln, um eine Benachrichtigung nur dann anzuzeigen, wenn ein Benutzer ungelesene Nachrichten hat. Wir werden überprüfen, ob der Benutzer ungelesene Nachrichten hat. Wenn diese Bedingung erfüllt ist, zeigen wir eine Benachrichtigung an, die die Anzahl der Nachrichten angibt. Wenn der Benutzer keine Nachrichten hat, wird nichts angezeigt.

Die Aufgabe ist:

• Erstellen Sie zwei Komponenten: App als übergeordnete Komponente und Notification als untergeordnete Komponente.

• Die übergeordnete Komponente App sollte eine Prop namens messages an die untergeordnete Komponente übergeben. Die messages-Prop ist ein Array, das Nachrichten enthält. In der untergeordneten Komponente müssen Sie die Länge des messages-Arrays überprüfen.

• Wenn sich Nachrichten im Array befinden, zeigen Sie eine Zeichenkette an, die sagt: You have <amount> of unread messages. Das <amount> sollte durch die tatsächliche Anzahl der ungelesenen Nachrichten ersetzt werden.

1. Um festzustellen, ob sich Nachrichten im Array befinden, können wir seine length mit der length-Eigenschaft überprüfen. Die Syntax lautet - array.length.

2. In React verwenden wir den Operator &&, um die Logik einer if-Anweisung zu implementieren.

3. Um den String korrekt zu konstruieren, ersetzen Sie den Platzhalter amount durch die tatsächliche Länge des Arrays.

4. Verwenden Sie geschweifte Klammern {array.length}, um die Array-Länge im String festzulegen.