React Training Course, Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und zum Styling

Ursprünglicher Autor: Bob Ziroll
  • Übersetzung
  • Tutorial
Heute, im zehnten Teil der Übersetzung des Schulungskurses zu React, empfehlen wir Ihnen, eine praktische Aufgabe zu erledigen, in der Sie mit den Eigenschaften von Komponenten und deren Gestaltung arbeiten. → Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSXTeil 2: FunktionskomponentenTeil 3: Komponentendateien, ProjektstrukturTeil 4: übergeordnete und untergeordnete KomponentenTeil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des StylingsTeil 6: einige Features des Kurses, JSX und JavaScriptTeil 7: Inline-StileTeil 8: Fortsetzung der Arbeit an einer TODO-Anwendung, Kenntnis der Eigenschaften von Komponenten

Bild









Teil 9: Eigenschaften von Komponenten
Teil 10: Workshop zum Arbeiten mit Eigenschaften von Komponenten und Stil
Teil 11: Dynamische Markup-Generierung und Array-Method-Map
Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
Teil 13: Klassenbasierte Komponenten
Teil 14: ein Workshop zu klassenbasierten Komponenten, Zustand der Komponenten
Teil 15: Workshops zum Arbeiten mit dem Zustand der Komponenten
Teil 16: vierte Phase der Arbeit an einer TODO-Anwendung, Ereignisverarbeitung
Teil 17: fünfte Phase der Arbeit an einer TODO-Anwendung, Änderungsstatus Komponenten
Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion zum bedingten Rendern
Teil 21: Die zweite Lektion und Übung zum bedingten Rendern
Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, Laden von Daten aus externen Quellen
Teil 23: Erste Lektion zum Arbeiten mit Formularen
Teil 24: Zweite Lektion zum Arbeiten mit Formularen
Teil 25: Praktische Arbeit mit Formularen
Teil 26: Anwendungsarchitektur, Muster für Container / Komponenten
Teil 27: Kursarbeit das Projekt

Lektion 20. Workshop. Komponenteneigenschaften, Styling


Original

▍Job


  1. Erstellen Sie ein neues React-Anwendungsprojekt.
  2. Drucken Sie auf der Anwendungsseite die Komponente aus, Appderen Code in einer separaten Datei gespeichert werden soll.
  3. Component App sollte 5 Komponenten anzeigen, Jokedie Witze enthalten. Drucken Sie diese Komponenten wie gewünscht aus.
  4. Jede Komponente Jokemuss die Eigenschaft questionfür den Hauptteil der Anekdote und die Eigenschaft punchLinefür ihre Schlüsselphrase akzeptieren und verarbeiten .

▍Erweiterte Aufgabe


Einige Witze bestehen ausschließlich aus einer Schlüsselphrase. Zum Beispiel: "Die Bestrafung von Kleptomanen ist schwer zu erklären, weil sie die Dinge immer wörtlich nehmen." Überlegen Sie, wie eine Komponente Jokeeine an punchLinesie übergebene Eigenschaft nur anzeigen kann, wenn die Eigenschaft questionnicht festgelegt ist. Experimentieren Sie mit Styling-Komponenten.

▍Entscheidung


Hauptaufgabe


Die Datei index.jswird ziemlich vertraut aussehen:

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App />, 
    document.getElementById("root"))

Hier ist der Dateicode App.js:

import React from "react"
import Joke from "./Joke"
function App() {
    return (
        <div>
            <Joke 
                question="What's the best thing about Switzerland?" 
                punchLine="I don't know, but the flag is a big plus!"
            />
            
            <Joke 
                question="Did you hear about the mathematician who's afraid of negative numbers?" 
                punchLine="He'll stop at nothing to avoid them!"
            />
            
            <Joke 
                question="Hear about the new restaurant called Karma?" 
                punchLine="There’s no menu: You get what you deserve."
            />
            
            <Joke 
                question="Did you hear about the actor who fell through the floorboards?" 
                punchLine="He was just going through a stage."
            />
            
            <Joke 
                question="Did you hear about the claustrophobic astronaut?" 
                punchLine="He just needed a little space."
            />
            
        </div>
    )
}
export default App

Da sich die Komponentendatei Jokeim selben Ordner befindet wie die Komponentendatei App, importieren wir sie mit dem Befehl import Joke from "./Joke". Von geben Appwir mehrere Elemente zurück, daher muss die gesamte Ausgabe in ein bestimmtes Tag eingeschlossen werden, beispielsweise in ein Tag <div>. Auf Komponenteninstanzen übertragen wir Eigenschaften questionund punchLine.

Hier ist der Dateicode Joke.js:

import React from "react"
function Joke(props) {
    return (
        <div>
            <h3>Question: {props.question}</h3>
            <h3>Answer: {props.punchLine}</h3>
            <hr/>
        </div>
    )
}
export default Joke

Bei der Funktionsdeklaration Jokegeben wir hier den Parameter an props. Erinnern Sie sich daran, dass dieser Name gemäß der etablierten Tradition verwendet wird. In der Tat kann es beliebig sein, aber es ist besser, es anzurufen props.

Von der Komponente geben wir mehrere Elemente zurück - sie sind also in einem Tag eingeschlossen <div>. Mit Design props.questionund props.punchLineappellieren wir an die Eigenschaften der Bean - Instanz übergeben , wenn sie erstellt wird. Diese Eigenschaften werden zu Eigenschaften des Objekts props. Sie sind in geschweifte Klammern eingeschlossen, da der in der JSX-Markierung verwendete JavaScript-Code in geschweifte Klammern gezeichnet werden muss. Andernfalls akzeptiert das System Variablennamen als Nur-Text. Nach ein paar Artikeln<h3>In einer davon wird der Haupttext der Anekdote angezeigt und in der anderen - der Schlüsselphrase - befindet sich ein Element <hr/>, das eine horizontale Linie beschreibt. Solche Zeilen werden nach jeder Anekdote angezeigt und trennen diese.

So sieht das Anwendungsprojekt in VSCode aus.


Anwendung in VSCode

Hier ist die Anwendungsseite.


Anwendungsseite im Browser

Zusätzliche aufgabe


Es sei daran erinnert, dass der Hauptzweck der zusätzlichen Aufgabe darin besteht, die korrekte Schlussfolgerung von Anekdoten zu organisieren, die ausschließlich aus einer Schlüsselphrase bestehen. Dies drückt sich darin aus, dass beim Erstellen einer Komponenteninstanz Jokenur eine Eigenschaft an sie übergeben punchLinewird, die Eigenschaft jedoch questionnicht. Das Erstellen einer Instanz einer solchen Komponente sieht folgendermaßen aus:

<Joke 
    punchLine="It’s hard to explain puns to kleptomaniacs because they always take things literally."
/>

Wenn Sie diesen Code in den oberen Teil des von der Komponente zurückgegebenen Codes einfügen App, hat die Anwendungsseite das folgende Formular.


Falsch geformte Anwendungsseite:

Offensichtlich besteht das Problem darin, dass die Eigenschaft zwar nicht an die Komponente übertragen wirdquestion, jedoch Text anzeigt, der dem Hauptteil jeder Anekdote vorangeht.

Mit Blick auf die Zukunft stellen wir fest, dass wir in zukünftigen Teilen des Kurses über bedingtes Rendering sprechen werden. Mit diesem Rendering-Ansatz können Sie Probleme wie unseres effektiv lösen. In der Zwischenzeit werden wir versuchen, die Seiten zu gestalten. Wir machen es nämlich so, dass, wenn die Eigenschaft nicht an die Komponente übertragen wirdquestion, das entsprechende Fragment des von ihr zurückgegebenen JSX-Markups nicht auf der Seite angezeigt wird. Hier ist der vollständige KomponentencodeJoke, der einen der möglichen Ansätze zur Lösung unseres Problems mit CSS implementiert:

import React from "react"
function Joke(props) {
    return (
        <div>
            <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>
            <h3>Answer: {props.punchLine}</h3>
            <hr/>
        </div>
    )
}
export default Joke

<h3>Wir weisen dem ersten Element einen Stil zu, der beim Erstellen einer Komponenteninstanz basierend auf dem Vorhandensein einer Eigenschaft im Objekt definiert wird props.question. Wenn sich diese Eigenschaft im Objekt befindet, akzeptiert das Element den Stil display: blockund wird auf der Seite angezeigt. Andernfalls wird es display: nonenicht auf der Seite angezeigt. Darüber hinaus führt die Verwendung einer solchen Konstruktion zu:

<h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>

Hier wird der Stil display: nonedem Element zugewiesen, wenn das Objekt propskeine Eigenschaft hat question, andernfalls displaywird der Eigenschaft nichts zugewiesen.

Jetzt sieht die Anwendungsseite im Browser wie folgt aus.


Korrekte Verarbeitung durch eine Komponente einer Situation, in der die Frageeigenschaft nicht an sie übergeben wird:

Man kann feststellen, dass alle von der Komponente gebildeten Elemente gleichJokeaussehen. Wir werden darüber nachdenken, wie wir diejenigen auswählen sollen, auf die nur die Immobilie übertragen wirdpunchLine. Wir lösen dieses Problem mithilfe der integrierten Stile und des oben beschriebenen Ansatzes. Hier ist der aktualisierte KomponentencodeJoke:

import React from "react"
function Joke(props) {
    return (
        <div>
            <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>
            <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>
            <hr/>
        </div>
    )
}
export default Joke

Aber wie sieht es aus, was jetzt auf der Anwendungsseite angezeigt wird.


Gestaltung eines Elements, das sich von anderen unterscheidet:

Nachdem wir nun an einer Komponente gearbeitet habenJoke, ist sie vielseitiger und für die Wiederverwendung besser geeignet.

Ergebnisse


In dieser praktischen Lektion haben wir an der Entwicklung von Fähigkeiten gearbeitet, um Komponenten auf Eigenschaften zu übertragen. Wenn Sie den Code des hier angegebenen Beispiels analysieren, werden Sie feststellen, dass Sie zur Ausgabe mehrerer ähnlicher Markup-Blöcke sich ständig wiederholende JSX-Codefragmente schreiben müssen. In der nächsten Lektion werden wir darüber sprechen, wie Sie mit automatisierten JavaScript-Werkzeugen die Bildung solcher Seiten automatisieren und dabei Markup und Daten voneinander trennen.

Liebe Leserinnen und Leser! Wenn Ihre Lösung für die Aufgaben dieses Workshops von der vorgeschlagenen abweicht, bitten wir Sie, darüber zu berichten.


Jetzt auch beliebt: