Inline-Stile in der Praxis

Lassen Sie uns eine vielseitige Notification-Komponente erstellen, die Text anzeigt und die Eigenschaft background-color dynamisch basierend auf der behavior-Eigenschaft ändert. Wir werden schrittweise mit der Implementierung fortfahren.

Schritt 1

Wir beginnen mit der Erstellung der übergeordneten Komponente App zusammen mit der untergeordneten Komponente Notification unter Verwendung der grundlegenden Struktur von React.

Schritt 2

Um der Notification-Komponente eine Standardstilgebung zu geben, erstellen wir ein Objekt namens notificationStyles und weisen die folgenden Eigenschaften zu: padding mit dem Wert "20px"; fontSize mit dem Wert "24px"; color mit dem Wert "aquamarine";

Lassen Sie uns das notificationStyles-Objekt als Wert für das style-Attribut der Notification component-Komponente zuweisen, das auf das zurückgegebene p-Element angewendet wird.

Schritt 3

Im App-Komponente können wir die Notification-Komponente nutzen, indem wir die behavior-Eigenschaft und die text-Eigenschaft übergeben. Die behavior-Eigenschaft bestimmt das Erscheinungsbild der Benachrichtigung, während die text-Eigenschaft den anzuzeigenden Text innerhalb der Benachrichtigung angibt.

Schritt 4

Wir können die Logik implementieren, um den Hintergrund jeder Benachrichtigungsnachricht basierend auf der behavior-Eigenschaft wie folgt zu färben:

• Wenn der Wert von behavior "positive" ist, sollte die Hintergrundfarbe auf green gesetzt werden;
• Wenn der Wert von behavior "negative" ist, sollte die Hintergrundfarbe auf red gesetzt werden;
• Wenn der Wert von behavior "neutral" ist, sollte die Hintergrundfarbe auf blue gesetzt werden.

Wir können eine Funktion erstellen, um die Logik mit der JavaScript-Switch-Anweisung zu handhaben. Hier ist ein Beispiel, wie es implementiert werden kann:

Diese Funktion nimmt die behavior-Eigenschaft als Argument und gibt die entsprechende Hintergrundfarbe basierend auf dem Wert mit der switch-Anweisung zurück. Die behavior-Eigenschaft gibt eine transparent Hintergrundfarbe zurück, wenn sie nicht mit den angegebenen Fällen übereinstimmt.

Lassen Sie uns diese Funktion in das Stilobjekt der Komponente integrieren:

Wir nutzen JavaScript-Konventionen, um die richtige Struktur des Stilobjekts sicherzustellen. Zuerst verbreiten wir das bestehende notificationStyles-Objekt. Dann führen wir eine zusätzliche Eigenschaft ein, backgroundColor, deren Wert aus dem von der setBackgroundColor-Funktion zurückgegebenen String abgeleitet wird.

Vollständiger App-Code: