React Tutorial Teil 21: Zweite Lektion und Workshop zum bedingten Rendern

In der Übersetzung des nächsten Teils des React-Schulungskurses machen wir Sie heute auf die zweite Lektion zum bedingten Rendern und einen Workshop zu diesem Thema aufmerksam.



→ 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 37. Bedingtes Rendern, Teil 2

→ Original

Im heutigen Tutorial zum bedingten Rendern werden wir uns mit der Verwendung des logischen Operators && (And) && . Wir werden mit einem Standardprojekt experimentieren, das von create-react-app erstellt wurde und in App.js Datei App.js der folgende Code befindet:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           unreadMessages: [               "Call your mom!",               "New spam email available. All links are definitely safe to click."           ]       }   }   render() {       return (           <div>              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           </div>       )   } } export default App 

Jetzt sieht die Anwendung im Browser wie unten gezeigt aus.


Anwendungsseite im Browser

Möglicherweise haben Sie den Operator && in Konstruktionen wie true && false (was false ergibt). Damit der true Ausdruck als Ergebnis der Berechnung eines solchen Ausdrucks zurückgegeben wird, sollte er wie true && true aussehen. Bei der Verarbeitung solcher Ausdrücke ermittelt JavaScript, ob die linke Seite wahr ist, und gibt in diesem Fall einfach das zurück, was sich auf der rechten Seite befindet. Wenn ein Ausdruck des Formulars false && false verarbeitet wird, wird false sofort zurückgegeben, ohne die rechte Seite des Ausdrucks zu überprüfen. Infolgedessen kann der Operator && beim bedingten Rendern verwendet werden. Damit können Sie entweder etwas zurückgeben, das auf dem Bildschirm angezeigt wird, oder nichts zurückgeben.

Lassen Sie uns den Code der Trainingsanwendung analysieren.

Der Status der App Komponente speichert ein Array von unreadMessages Zeichenfolgen. Jede Zeile in diesem Array repräsentiert eine ungelesene Nachricht. Auf der Seite wird die Anzahl der ungelesenen Nachrichten angezeigt, die anhand der Länge des Arrays ermittelt werden. Wenn dieses Array leer ist, dh kein einzelnes Element enthält, zeigt die Anwendung an, was unten auf der Seite angezeigt wird.


Die Anwendung informiert uns, dass keine ungelesenen Nachrichten vorliegen

Um diesen Effekt zu erzielen, reicht es aus, das Array in die folgende Form zu bringen: unreadMessages: [] .

Wenn keine ungelesenen Nachrichten vorhanden sind, ist es durchaus möglich, überhaupt keine Nachricht anzuzeigen. Wenn wir den ternären Operator verwenden, über den wir das letzte Mal gesprochen haben , um dieses Verhalten der Anwendung zu implementieren, kann die render() -Methode der App Komponente wie folgt umgeschrieben werden:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 ?              <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :               null           }       </div>   ) } 

Wenn das Array unreadMessages leer ist, wird auf der Seite nichts angezeigt. Der hier dargestellte Code kann jedoch mithilfe des Operators && vereinfacht werden. So würde es aussehen:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 &&              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           }       </div>   ) } 

Wenn sich etwas im Array befindet, wird die rechte Seite des Ausdrucks auf der Seite angezeigt. Wenn das Array leer ist, wird auf der Seite nichts angezeigt.

Dies bedeutet nicht, dass die Verwendung des Operators && beim bedingten Rendern unbedingt erforderlich ist, da der gleiche Effekt mit einem ternären Operator erzielt werden kann, der null zurückgibt, wenn die getestete Bedingung falsch ist. Der hier vorgestellte Ansatz vereinfacht jedoch den Code und wird außerdem häufig verwendet, sodass Sie ihn möglicherweise beim Lesen der Programme anderer Personen finden.

Lektion 38. Workshop. Bedingtes Rendern

→ Original

»Job

Hier ist der Code der App Funktionskomponente, der in der App.js Datei eines Standardprojekts gespeichert ist, das mit create-react-app erstellt wurde.

 import React from "react" function App() {   return (       <div>           Code goes here       </div>   ) } export default App 

Sie müssen Folgendes tun:

1. Konvertieren Sie den Komponentencode, um ihn mit state auszustatten.
2. Stellen Sie sicher, dass der Status der Komponente Informationen darüber speichert, ob der Benutzer „angemeldet“ ist oder nicht (in dieser Übung bedeutet „Anmelden“ und „Abmelden“ des Systems nur das Ändern des entsprechenden im Status gespeicherten Werts).
3. Fügen Sie der Seite hinzu, dass die Komponente eine Schaltfläche bildet, mit der sich der Benutzer an- und abmelden kann.
   
   
   1. Dies ist eine zusätzliche Aufgabe. Stellen Sie sicher, dass auf der Schaltfläche ANMELDEN angezeigt wird, wenn der Benutzer nicht angemeldet ist. Wenn er angemeldet ist, wird LOG OUT .
      
4. Logged in Sie auf der von der Komponente gebildeten Seite Logged in wenn der Benutzer angemeldet ist, und Logged out wenn er nicht Logged out .
   

Wenn Sie jetzt das Gefühl haben, dass es für Sie schwierig ist, diese Probleme zu lösen, lesen Sie die Tipps und machen Sie sich an die Arbeit.

▍Tipps

Um diese Aufgabe abzuschließen, müssen Sie sich an vieles erinnern, worüber wir in früheren Kursen gesprochen haben. Zunächst muss eine Komponente, die einen Status haben kann, eine Komponente sein, die auf einer Klasse basiert. Diese Komponente muss einen Konstruktor haben. Im Status der Komponente können Sie eine logische Eigenschaft speichern, die beispielsweise als isLoggedIn kann. Der Wert true oder false gibt an, ob der Benutzer angemeldet ist oder nicht. Damit die Schaltfläche, die der von der Anwendung generierten Seite hinzugefügt werden muss, ihre Funktionen ausführen kann, ist ein onClick Ereignishandler onClick . Um je nach dem sich ändernden Wert des Staates unterschiedliche Texte anzuzeigen, muss auf die Technologie des bedingten Renderings zurückgegriffen werden.

▍Lösung

Wir transformieren die im Code verfügbare Funktionskomponente in die Komponente basierend auf einer Klasse. Wir brauchen dies aus mehreren Gründen. Zunächst müssen wir mit dem Status der Anwendung arbeiten. Zweitens benötigen wir einen Ereignishandler, der aufgerufen wird, wenn auf eine Schaltfläche geklickt wird. Im Prinzip können Sie eine unabhängige Funktion schreiben und damit Schaltflächenereignisse verarbeiten. Ich beschreibe jedoch lieber Handler innerhalb der Komponentenklassen.

So sieht der Code für eine Funktionskomponente aus, die in eine klassenbasierte Komponente konvertiert wurde. Hier beschreiben wir im Komponentenkonstruktor seinen Anfangszustand, der die auf false isLoggedIn Eigenschaft isLoggedIn enthält.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }   }   render() {          return (           <div>               Code goes here           </div>       )   } } export default App 

Der obige Code ist eine Lösung für den ersten und zweiten Teil der Aufgabe. Jetzt arbeiten wir daran, der von der Komponente angezeigten Seite eine Schaltfläche hinzuzufügen. Bisher wird auf dieser Schaltfläche dieselbe Beschriftung angezeigt, unabhängig davon, was im Anwendungsstatus gespeichert ist. Wir werden es mit einem Ereignishandler ausstatten, der die Funktionsfähigkeit unseres Codes überprüft. Dies ist ein einfacher Befehl, um eine Nachricht an die Konsole auszugeben. Darüber hinaus binden wir im Komponentenkonstruktor diesen Handler an this , was für uns nützlich ist, wenn wir im Code dieses Handlers auf die Mechanismen zugreifen, die für die Arbeit mit dem Status der Komponente ausgelegt sind. Jetzt sieht der Code wie folgt aus.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       console.log("I'm working!")   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Wenn Sie auf die Schaltfläche LOG IN klicken, I'm working! .

Erinnern wir uns nun daran, dass sich die im isLoggedIn gespeicherte Eigenschaft isLoggedIn beim Klicken auf die Schaltfläche von true in false und umgekehrt isLoggedIn . Dazu müssen Sie im Schaltflächenklick-Handler die Funktion this.setState() , die auf zwei Arten verwendet werden kann. Es kann nämlich in Form eines Objekts eine neue Vorstellung davon vermittelt werden, was in dem Zustand enthalten sein soll. Die zweite Variante ihrer Verwendung sieht die Übertragung einer Funktion an sie vor, die den vorherigen Zustand der Komponente annimmt und einen neuen bildet und das Objekt wieder zurückgibt. Wir werden genau das tun. Das haben wir in dieser Phase der Arbeit bekommen.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Hier könnten wir das if-else-Konstrukt verwenden, aber wir konvertieren einfach true in false und false in true mithilfe des logischen Operators ! (NICHT).

Bisher haben wir keinen Mechanismus, der es uns ermöglicht, basierend auf dem, was im Status gespeichert ist, das Erscheinungsbild der Anwendung zu beeinflussen. Daher werden wir jetzt die zusätzliche Aufgabe von Aufgabe Nummer 3 lösen. Wir werden nämlich die Beschriftung auf der Schaltfläche abhängig vom Status der Komponente ändern. Um dies zu erreichen, können Sie in der render() -Methode eine Variable deklarieren, deren Wert LOG IN oder LOG OUT davon abhängt, was im Status gespeichert ist. Dieser Wert kann dann als Schaltflächentext verwendet werden. So sieht es aus.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>           </div>       )   } } export default App 

Nehmen wir nun den vierten Teil der Aufgabe. Wir werden Text auf der Seite anzeigen, je nachdem, ob der Benutzer angemeldet ist oder nicht. In der Tat ist die Lösung dieses Problems sehr einfach, wenn man alles berücksichtigt, was bereits im Komponentencode vorhanden ist. Unten finden Sie den fertigen Code für die Datei App.js

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>               <h1>{displayText}</h1>           </div>       )   } } export default App 

So sieht die Anwendung im Browser aus.


Anwendungsseite im Browser

Durch Klicken auf die in der vorherigen Abbildung gezeigte Schaltfläche LOG OUT wird der Anwendungsstatus geändert. LOG OUT wird Anmelden auf der Schaltfläche angezeigt und auf der Seite wird Text angezeigt, der den Benutzer darüber informiert, dass er angemeldet ist.

Zusammenfassung

Heute haben wir weiter über bedingtes Rendern gesprochen, die Verwendung des Operators && untersucht und eine praktische Aufgabe mit vielen der von uns untersuchten Mechanismen erledigt. Das nächste Mal werden Sie weiter an der Todo-Anwendung und einem neuen Thema arbeiten.

Liebe Leser! Haben Sie die heutige praktische Aufgabe gemeistert?