React Tutorial Teil 15: Komponentenstatus-Workshops

Heute empfehlen wir Ihnen, zwei praktische Kurse zum Arbeiten mit dem Status von Komponenten zu absolvieren. Insbesondere bei der Ausführung der heutigen Aufgaben können Sie nicht nur das Konzept der Eigenschaften besser verstehen, sondern auch am Debuggen von React-Anwendungen arbeiten, bei denen Fehler auftreten.



→ 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 27. Workshop. Debuggen des Komponentenstatus

→ Original

»Job

Analysieren Sie den folgenden App Klassencode aus der App.js Datei einer Standard-React-Anwendung, die von create-react-app . Dieser Code ist unvollständig, er hat Fehler.

 import React from "react" class App extends Component() {   return (       <div>           <h1>{this.state.name}</h1>           <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>       </div>   ) } export default App 

Die klassenbasierte App Komponente hat keinen Konstruktor, ihr Status wird nicht initialisiert, aber wenn sie das bildet, was sie zurückgibt, impliziert dies, dass sie einen Status mit einigen Daten hat.

Ihre Aufgabe ist es, diesen Code in einen verwendbaren Zustand zu bringen.

Wenn Sie auf eine bestimmte Fehlermeldung stoßen, die Ihnen unbekannt ist, sollten Sie sich nicht beeilen, die Lösung zu prüfen. Versuchen Sie beispielsweise, den Code sorgfältig zu lesen und im Internet nach Informationen zum Problem zu suchen, die Fehlerursache herauszufinden und zu beheben. Das Debuggen von Code ist eine wertvolle Fähigkeit, die Sie auf jeden Fall benötigen, wenn Sie an realen Projekten arbeiten.

▍Lösung

Der Körper einer Klasse ähnelt dem Körper einer Funktionskomponente. Es enthält nur den Befehl return , aber in Komponenten, die auf Klassen basieren, wird dieser Befehl in der render() -Methode und nicht im Klassenkörper verwendet. Repariere es.

 import React from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Wenn wir die Analyse des Codes fortsetzen und die im Browser angezeigten Fehlermeldungen betrachten, können wir verstehen, dass die Konstruktion der class App extends Component ganz normal aussieht, aber immer noch etwas mit dem, was wir unter dem Namen Component bezeichnen, nicht stimmt. Das Problem ist, dass im import React from "react" nur import React from "react" , nicht aber" Component in das Projekt importiert wird. Das heißt, wir müssen entweder diesen Befehl bearbeiten und ihn in den Formularimport import React, {Component} from "react" . Beim Erstellen der Klasse können wir den vorhandenen Code verwenden oder die Klassendeklaration in dieser Form neu schreiben: class App extends React.Component . Wir werden uns auf die erste Option konzentrieren. Jetzt sieht der Komponentencode folgendermaßen aus:

 import React, {Component} from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Es stimmt, die Probleme enden nicht dort. Die Anwendung funktioniert nicht, im Browser wird eine TypeError: Cannot set property 'props' of undefined Fehlermeldung angezeigt TypeError: Cannot set property 'props' of undefined werden. Wir werden darüber informiert, dass in der ersten Zeile der Klassendeklaration etwas nicht stimmt.

Der Punkt hier ist, dass beim Deklarieren einer Komponente, die, wie wir bereits verstanden haben, eine Komponente ist, die auf einer Klasse basiert, ein Paar Klammern nach dem Namen der übergeordneten Klasse erscheint. Sie werden hier nicht benötigt, dies ist keine funktionale Komponente, daher werden wir sie loswerden. Jetzt stellt sich heraus, dass der Anwendungscode mehr oder weniger funktionsfähig ist. Die auf der Klasse basierende Komponente sieht nicht mehr völlig falsch aus, aber das System meldet uns weiterhin Fehler. Jetzt sieht die Fehlermeldung folgendermaßen aus: TypeError: Cannot read property 'name' of null . Offensichtlich handelt es sich um einen Versuch, Daten zu verwenden, die in einem Komponentenzustand gespeichert sind, der noch nicht initialisiert wurde. Daher erstellen wir jetzt einen Klassenkonstruktor, ohne zu vergessen, super() darin aufzurufen, und initialisieren den Status der Komponente, indem wir Werte hinzufügen, mit denen die Komponente zu arbeiten versucht.

Hier ist der fertige Arbeitscode für die App Komponente:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           name: "Sally",           age: 13       }   }     render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

So sieht die Anwendungsseite in einem Browser aus.


Anwendungsseite im Browser

Lektion 28. Workshop. Komponentenstatus, arbeiten Sie mit Daten, die im Status gespeichert sind

→ Original

In dieser Übungssitzung haben Sie eine weitere Möglichkeit, mit dem Status der Komponenten zu arbeiten.

»Job

Unten finden Sie den Code der Funktionskomponente. Gehen Sie auf dieser Grundlage wie folgt vor:

1. Transformieren Sie es so, dass die Komponente einen Status hat.
2. Der Komponentenstatus muss die Eigenschaft isLoggedIn , in der der logische Wert true isLoggedIn , wenn der Benutzer angemeldet ist, und false wenn nicht (in unserem Fall gibt es hier keine "Anmeldemechanismen", der entsprechende Wert muss manuell festgelegt werden, wenn der Status initialisiert wird).
3. Stellen Sie sicher, dass die Komponente, wenn der Benutzer angemeldet ist, den Text You are currently logged in , und, falls nicht, den Text, den You are currently logged out . Diese Aufgabe ist optional. Wenn Sie Schwierigkeiten bei der Implementierung haben, können Sie beispielsweise im Internet nach Ideen suchen.

Hier ist der Code für die Datei App.js :

 import React from "react" function App() {   return (       <div>           <h1>You are currently logged (in/out)</h1>       </div>   ) } export default App 

▍Lösung

Wir verfügen über eine Funktionskomponente. Um es mit einem Status auszustatten, muss es basierend auf der Klasse in eine Komponente umgewandelt und sein Status initialisiert werden. So sieht der konvertierte Komponentencode aus:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       return (           <div>               <h1>You are currently logged (in/out)</h1>           </div>       )   } } export default App 

Überprüfen Sie den Zustand der Anwendung.


Anwendung im Browser

Wenn Sie selbst diesen Punkt erreicht haben, bedeutet dies, dass Sie das Material in dem Kurs gelernt haben, der sich mit Komponenten befasst, die auf Klassen und dem Status von Komponenten basieren. Jetzt werden wir eine optionale Aufgabe übernehmen.

Im Wesentlichen wird in einer Lektion, die sich auf das bedingte Rendern konzentriert, erläutert, was wir tun müssen, um diese Aufgabe abzuschließen. Hier gehen wir also ein wenig weiter. Wir werden also eine Variable deklarieren und initialisieren, die die Zeichenfolge in oder out je nachdem, was in der isLoggedIn state gespeichert ist. Wir werden mit dieser Variablen in der render() -Methode arbeiten, zuerst die Daten analysieren und den gewünschten Wert in sie schreiben und sie dann in dem von der Komponente zurückgegebenen JSX-Code verwenden. Folgendes haben wir erreicht:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       let wordDisplay       if (this.state.isLoggedIn === true) {           wordDisplay = "in"       } else {           wordDisplay = "out"       }       return (           <div>               <h1>You are currently logged {wordDisplay}</h1>           </div>       )   } } export default App 

Beachten Sie, dass die Variable wordDisplay eine normale lokale Variable ist, die in der Methode render() deklariert ist. wordDisplay innerhalb dieser Methode darauf zugreifen zu können, müssen Sie nur ihren Namen angeben.

So sieht die Anwendungsseite jetzt aus:


Anwendungsseite im Browser

Die isLoggedIn state isLoggedIn auf true , sodass der You are currently logged in Text auf der Seite angezeigt wird. Um den Text anzuzeigen, den You are currently logged out Sie im Komponentencode den Wert von isLoggedIn in false isLoggedIn .

Es ist zu beachten, dass dieses Problem auf andere Weise gelöst werden kann. Der Code, den wir erhalten haben, ist klar und effizient, daher werden wir uns damit isLoggedIn if (this.state.isLoggedIn === true) beispielsweise isLoggedIn eine logische Variable ist, kann die Bedingung if (this.state.isLoggedIn === true) so umgeschrieben werden, als if (this.state.isLoggedIn) .

Zusammenfassung

Heute haben Sie das Arbeiten mit dem Status von Komponenten geübt, insbesondere Fehler im Code korrigiert, eine Funktionskomponente zu einer auf Klassen basierenden Komponente verarbeitet und sich mit dem bedingten Rendern befasst. Nächstes Mal haben Sie eine weitere praktische Arbeit und ein neues Thema.

Liebe Leser! Haben Sie es geschafft, alle Fehler selbst zu finden und zu beheben, indem Sie die erste der hier vorgestellten praktischen Arbeiten abgeschlossen haben?