Heute, im zehnten Teil der Übersetzung des React-Schulungskurses, empfehlen wir Ihnen, eine praktische Aufgabe zum Arbeiten mit den Eigenschaften von Komponenten und zum Gestalten dieser zu erledigen.
→
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 KomponentenlebenszyklusTeil 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: KursprojektLektion 20. Workshop. Komponenteneigenschaften, Styling
→
Original»Job
- Erstellen Sie ein neues React-Anwendungsprojekt.
- Zeigen Sie die App-Komponente auf der Anwendungsseite an, deren Code sich in einer separaten Datei befinden sollte.
- Die App-Komponente sollte 5
Joke ausgeben, die Witze enthalten. Bringen Sie diese Komponenten so heraus, wie Sie es möchten. - Jede
Joke Komponente sollte die question Eigenschaft für den Hauptteil des Witzes und die punchLine Eigenschaft für ihre Schlüsselphrase akzeptieren und verarbeiten.
▍Zusatzaufgabe
Einige Witze bestehen ausschließlich aus einem Schlüsselbegriff. Zum Beispiel: "Es ist schwierig, Kleptomanen Wortspiele zu erklären, weil sie die Dinge immer wörtlich nehmen." Überlegen Sie, wie die
Joke Komponente
punchLine an sie übergebene
punchLine Eigenschaft nur anzeigen kann, wenn die
question Eigenschaft nicht festgelegt ist. Experimentieren Sie mit dem Styling Ihrer Komponenten.
▍Lösung
Hauptaufgabe
Die Datei
index.js mir bekannt vor:
import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />, document.getElementById("root"))
Hier ist der Code für die Datei
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
Joke Komponentendatei im selben Ordner wie die
App Komponentendatei befindet, importieren wir sie mit dem
import Joke from "./Joke" . Wir geben mehrere Elemente aus der
App , daher müssen wir die gesamte Ausgabe in ein bestimmtes Tag einschließen, z. B. in das
<div> . An die Komponenteninstanzen übergeben wir die
question und
punchLine .
Hier ist der Code für die Datei
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
Hier geben wir beim Deklarieren der
Joke Funktion den Parameter
props . Denken Sie daran, dass es ein solcher Name ist, der gemäß der etablierten Tradition verwendet wird. In der Tat kann es alles sein, aber es ist besser, es
props zu nennen.
Wir geben mehrere Elemente von der Komponente zurück - daher sind sie im
<div> . Mit den
props.punchLine props.question und
props.punchLine wir auf die Eigenschaften zu, die beim
props.question an die Komponenteninstanz übergeben wurden. Diese Eigenschaften werden zu Eigenschaften des
props . Sie sind in geschweiften Klammern eingeschlossen, da der im JSX-Markup verwendete JavaScript-Code in geschweiften Klammern eingeschlossen sein muss. Andernfalls nimmt das System die Variablennamen als Klartext. Nach einem Paar von
<h3> -Elementen, in denen der Haupttext des Witzes angezeigt wird, und in dem anderen - seiner Schlüsselphrase - befindet sich das
<hr/> -Element, das die horizontale Linie beschreibt. Solche Zeilen werden nach jedem Witz angezeigt und getrennt.
So sieht das Anwendungsprojekt in VSCode aus.
Anwendung in VSCodeHier ist die Bewerbungsseite.
Anwendungsseite im BrowserZusätzliche Aufgabe
Denken Sie daran, dass das Hauptziel der zusätzlichen Aufgabe darin besteht, die korrekte Schlussfolgerung von Witzen zu organisieren, die ausschließlich aus einer Schlüsselphrase bestehen. Dies drückt sich darin aus, dass beim Erstellen einer Instanz der
Joke Komponente nur die
punchLine Eigenschaft
punchLine wird und die
question Eigenschaft nicht übergeben wird. 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 oben in den von der
App Komponente zurückgegebenen Code einfügen, sieht die Anwendungsseite folgendermaßen aus.
Falsch gestaltete AnwendungsseiteOffensichtlich besteht das Problem hier darin, dass, obwohl die
question Eigenschaft nicht an die Komponente übergeben wird, Text angezeigt wird, der dem Hauptteil jedes Witzes vorausgeht, wonach nichts ausgegeben wird.
Mit Blick auf die Zukunft werden wir feststellen, dass wir in zukünftigen Teilen des Kurses über bedingtes Rendern sprechen werden. Mit diesem Rendering-Ansatz können Sie Probleme wie das unsere effektiv lösen. In der Zwischenzeit werden wir versuchen, die Mittel zum Stylen von Seiten zu verwenden. Wir werden es so machen, dass, wenn die
question Eigenschaft nicht an die Komponente übergeben wird, das entsprechende Fragment des von ihr zurückgegebenen JSX-Markups nicht auf der Seite angezeigt wird. Hier ist der vollständige Code für die
Joke Komponente, der einen der möglichen Ansätze zur Lösung unseres Problems mithilfe von 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
Wir weisen dem ersten Element
<h3> Stil zu, der während der Instanziierung der Komponente basierend auf dem Vorhandensein der Eigenschaft
props.question im Objekt bestimmt wird. Wenn sich diese Eigenschaft im Objekt befindet, übernimmt das Element den
display: block und wird auf der Seite angezeigt. Wenn nicht, wird
display: none angezeigt und nicht auf der Seite angezeigt. Die Verwendung einer solchen Konstruktion führt zu demselben Effekt:
<h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>
Hier wird dem Element die
display: none Stil wird zugewiesen, wenn das
props nicht über die
question Eigenschaft verfügt, andernfalls wird der
display nichts zugewiesen.
Jetzt sieht die Anwendungsseite im Browser wie unten gezeigt aus.
Ordnungsgemäße Behandlung von Komponenten in einer Situation, in der die Frageeigenschaft nicht an sie übergeben wirdMöglicherweise stellen Sie fest, dass alle von der
Joke Komponente gebildeten Elemente gleich aussehen. Lassen Sie uns darüber nachdenken, wie Sie diejenigen auswählen, die nur die
punchLine Eigenschaft übergeben. Wir werden dieses Problem mithilfe der integrierten Stile und des oben untersuchten Ansatzes lösen. Hier ist der aktualisierte Code für die
Joke Komponente:
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
Und hier ist, was jetzt auf der Anwendungsseite erscheint.
Styling eines Artikels, der sich von anderen unterscheidetNachdem wir an der
Joke Komponente gearbeitet haben, ist sie vielseitiger und besser für die Wiederverwendung geeignet.
Zusammenfassung
In dieser praktischen Lektion haben wir Fähigkeiten entwickelt, um Eigenschaften auf Komponenten zu übertragen. Wenn Sie den Code in dem hier angegebenen Beispiel analysieren, werden Sie feststellen, dass Sie zur Wiederholung mehrerer ähnlicher Markup-Blöcke ständig sich wiederholende Fragmente des JSX-Codes schreiben müssen. In der nächsten Lektion werden wir darüber sprechen, wie die Erstellung solcher Seiten mithilfe von Standard-JavaScript-Tools automatisiert werden kann, während Markup und Daten getrennt werden.
Liebe Leser! Wenn sich Ihre Lösung für die Probleme dieses Workshops von der vorgeschlagenen unterscheidet, teilen Sie uns dies bitte mit.