React Tutorial Teil 7: Inline-Stile

Heute, im nächsten Teil des React-Kurses, werden wir über Inline-Stile sprechen.



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt

Lektion 15. Integrierte Stile

→ Original

Am Ende der letzten Lektion haben wir eine Komponente erstellt, die die Tageszeit analysiert und eine entsprechende Begrüßung anzeigt. Hier ist der vollständige index.js Datei index.js , der diese Funktionalität implementiert:

 import React from "react" import ReactDOM from "react-dom" function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Jetzt müssen wir festlegen, was dieser Code auf der Seite anzeigt. Gleichzeitig werden wir hier einen Ansatz verwenden, der sich von der Stilisierung von Elementen unterscheidet, die zuvor mithilfe von CSS-Klassen betrachtet wurden. Wir sprechen nämlich über die Verwendung des HTML-Attributstils. Mal sehen, was passiert, wenn Sie dieses Design verwenden:

 <h1 style="color: #FF8C00">Good {timeOfDay}!</h1> 

Eigentlich nichts Gutes. Der Text gelangt nicht auf die Seite, sondern es wird eine Fehlermeldung angezeigt. Das Wesentliche besteht darin, dass hier beim Einrichten der Stile kein Zeichenfolgenwert erwartet wird, sondern ein Objekt, das Paare des Formularschlüssels enthält : , wobei die Schlüssel die Namen der CSS-Eigenschaften und die Werte ihre Werte sind.

Wenn wir versuchen, HTML-Attribute in JSX-Code zu verwenden, sollten wir nicht vergessen, dass das, womit wir arbeiten, obwohl es wie normaler HTML-Code aussieht, dies nicht ist. Infolgedessen kann das Aussehen dieses oder jenes Designs hier von dem abweichen, was in HTML akzeptiert wird. In diesem Fall benötigen wir ein reguläres JavaScript-Objekt, das eine Beschreibung der Stile enthält. Mit dieser Idee bewaffnet, schreiben wir das obige Codefragment wie folgt um:

 <h1 style={color: "#FF8C00"}>Good {timeOfDay}!</h1> 

Leider funktioniert unser Code auch nicht. Infolge seiner Ausführung wird erneut eine Fehlermeldung angezeigt, die jedoch nicht mit der beim letzten Mal identisch ist. Es wird jetzt berichtet, dass das System, wenn es eine geschweifte Klammer erwarten kann, etwas anderes findet. Um dieses Problem zu lösen, müssen Sie sich daran erinnern, worüber wir in der vorherigen Lektion gesprochen haben. Dieser in JSX eingebettete JavaScript-Code sollte nämlich in geschweiften Klammern stehen. Diese geschweiften Klammern, die bereits in unserem Code vorhanden sind, werden verwendet, um das Objektliteral zu beschreiben und nicht um den JS-Code hervorzuheben. Lassen Sie uns das beheben:

 <h1 style={{color: "#FF8C00"}}>Good {timeOfDay}!</h1> 

Jetzt bildet die Komponente genau das, was auf der Seite benötigt wird.


Stilisierter Text, der von der Komponente auf der Seite angezeigt wird

Was ist, wenn wir uns entscheiden, diesen Text weiter zu gestalten? Dazu müssen wir uns daran erinnern, dass wir die Stile im JS-Objekt beschreiben, was bedeutet, dass wir diesem Objekt zusätzliche : Paare hinzufügen müssen. Zum Beispiel werden wir versuchen, den Hintergrund des Textes auf diese Weise mit der CSS-Eigenschaft background-color und den Code wie folgt zu ergänzen:

 <h1 style={{color: "#FF8C00", background-color: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Dieser Entwurf führt zu einer Fehlermeldung. Der Punkt hier ist, dass wir die Stile mit einem regulären JS-Objekt beschreiben und in JavaScript Variablen und Eigenschaftsnamen von Objekten ( Bezeichnern ) nicht das Symbol "-", Bindestriche, enthalten dürfen. Tatsächlich kann diese Einschränkung umgangen werden, indem beispielsweise der Eigenschaftsname des Objekts in Anführungszeichen gesetzt wird. In unserem Fall ist dies jedoch nicht der Fall. In solchen Situationen, in denen CSS-Eigenschaftsnamen einen Bindestrich enthalten, entfernen wir dieses Zeichen und setzen den ersten Buchstaben des darauf folgenden Wortes in Großbuchstaben. Es ist leicht zu erkennen, dass bei diesem Ansatz CSS-Eigenschaftsnamen im Kamelstil geschrieben werden - genau wie in JavaScript ist es üblich, Variablennamen zu schreiben, die aus mehreren Wörtern bestehen. Schreiben Sie den Code neu:

 <h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1> 

Schauen wir uns die Ergebnisse seiner Arbeit an.


Stilisierter Text, der von der Komponente auf der Seite angezeigt wird

Beim Stylen von Text wird der Code eines Objekts mit Stilen länger. Es ist unpraktisch, mit ihm zu arbeiten. Wenn Sie versuchen, diesen Code in mehrere Zeilen aufzuteilen, wird auch nichts Gutes daraus. Daher leiten wir die Beschreibung des Objekts mit Stilen aus dem JSX-Code ab, indem wir eine Konstante mit den Namensstilen erstellen, das Objekt darauf schreiben und seinen Namen in JSX verwenden. Als Ergebnis erhalten wir Folgendes:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) 

Dieser Code funktioniert genauso wie der oben beschriebene, aber dieser Ansatz ist sehr praktisch, wenn dem Objekt neue Stile hinzugefügt werden müssen. Dies führt nicht dazu, dass der von der Komponente zurückgegebene Code wächst.

Wie Sie sehen können, werden die Werte der CSS-Eigenschaften jetzt im styles als Zeichenfolgen festgelegt. Bei der Arbeit mit diesem Objekt sollten einige Merkmale berücksichtigt werden, die sich insbesondere auf Eigenschaften beziehen, deren Werte in Form von Zahlen festgelegt werden. Dies ist beispielsweise eine fontSize Eigenschaft (die in CSS wie eine font-size fontSize ). Diese Eigenschaft kann also in Form einer normalen Zahl und nicht in Form von Anführungszeichen festgelegt werden. Zum Beispiel ist die folgende Konstruktion vollkommen gültig:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: 24 } 

Hier wird die Zahl 24 als die in Pixel angegebene Schriftgröße interpretiert. Wenn die Maßeinheit explizit angegeben werden muss, müssen wir erneut die Zeichenfolgenwerte der Eigenschaften verwenden. Beispielsweise ähnelt das folgende Codefragment hinsichtlich der Auswirkung auf die Schriftgröße dem vorherigen, aber die Maßeinheit für die Größe wird hier explizit angegeben:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: "24px" } 

Hier haben wir die Größe in Pixel angegeben, aber bei Bedarf können andere Einheiten in ähnlichen Designs verwendet werden.

Wenn man über die eingebauten Stile spricht, kann man die Einschränkungen dieses Ansatzes nicht übersehen. Wenn Sie den Stilen Browserpräfixe hinzufügen müssen, kann dies etwas schwieriger sein als das Hinzufügen anderer Stile. Aber so etwas wie Pseudoklassen wie :hover wird nicht unterstützt. Wenn Sie es in dieser Phase des Mastering von React benötigen, ist es am besten, die Stilelemente mithilfe von CSS-Klassen zu nutzen. Und in Zukunft wird es für Sie wahrscheinlich am bequemsten sein, spezielle Bibliotheken wie gestaltete Komponenten für solche Zwecke zu verwenden. Im Moment beschränken wir uns jedoch auf Inline-Stile und Stilelemente mithilfe von CSS-Klassen.

Nachdem Sie diese Einschränkung von Inline-Stilen kennengelernt haben, fragen Sie sich möglicherweise, warum Sie sie verwenden sollten, wenn CSS-Klassen den gleichen Effekt erzielen und über umfangreichere Funktionen verfügen können. Ein Grund für die Verwendung von Inline-Stilen in React ist, dass solche Stile dynamisch generiert werden können. Darüber hinaus wird mittels JavaScript-Code bestimmt, wie dieser oder jener Stil aussehen wird. Wir schreiben unser Beispiel so um, dass sich die Farbe des Textes abhängig von der Tageszeit ändert, zu der die Nachricht angezeigt wird.

Hier ist der vollständige Komponentencode, der die dynamische Stilbildung verwendet.

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay const styles = {   fontSize: 30 } if (hours < 12) {   timeOfDay = "morning"   styles.color = "#04756F" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon"   styles.color = "#2E0927" } else {   timeOfDay = "night"   styles.color = "#D90000" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) } 

Beachten Sie, dass die Deklaration der styles Konstante jetzt vor dem if Block steht. In dem Objekt, das den Stil definiert, wird nur die Schriftgröße der Beschriftung festgelegt - 30 Pixel. Anschließend wird dem Objekt die color hinzugefügt, deren Wert von der Tageszeit abhängt. Denken Sie daran, dass es sich um ein ganz normales JavaScript-Objekt handelt und dass solche Objekte das Hinzufügen und Ändern von Eigenschaften nach ihrer Erstellung unterstützen. Nachdem der Stil erstellt wurde, wird er beim Anzeigen von Text angewendet. Um alle Zweige einer bedingten Anweisung schnell zu testen, können Sie beim Initialisieren der Datumskonstante das gewünschte Datum und die gewünschte Uhrzeit an den Konstruktor des Date . Zum Beispiel könnte es so aussehen:

 const date = new Date(2018, 6, 31, 15) 

Streng genommen bedeutet dies, dass dynamische Daten das Aussehen der von den Komponenten gebildeten Elemente beeinflussen können. Dies eröffnet dem Entwickler große Chancen.

Zusammenfassung

Heute haben wir über integrierte Stile gesprochen, über ihre Fähigkeiten und Einschränkungen. In der nächsten Lektion werden wir weiter an der TODO-Anwendung arbeiten und uns mit den Eigenschaften von Komponenten und dem wichtigsten Konzept von React vertraut machen. Daher wird allen an diesem Kurs Beteiligten empfohlen, vor Fortsetzung des Studiums alles zu wiederholen und mit allem zu experimentieren, was wir zu diesem Zeitpunkt analysiert haben.

Liebe Leser! Wenn Sie sich mit der Entwicklung von React auskennen, teilen Sie uns bitte mit, mit welchen Bibliotheken Sie Komponenten formatieren.