Vorherige

Nächste

Anzeigen dynamischer Daten

Abgeschlossen

Mit Komponenten können Sie eine Anwendung in logische Teile aufteilen. In dieser Einheit untersuchen wir diese Funktionalität, indem wir eine Komponente für den Titel eines Rezepts erstellen. Wir erstellen Komponenten und importieren sie in App. Außerdem untersuchen wir, wie Daten dynamisch angezeigt werden.

Anzeigen dynamischer Daten

Verwenden Sie zum Anzeigen dynamischer Daten innerhalb einer Komponente die Syntax { }, auch als Handlebars bezeichnet. Dieser Syntaxstil ist in HTML-Vorlagentools relativ häufig. Wechseln Sie mit diesen Handlebars effektiv in den JavaScript-Modus, und führen Sie nahezu jedes gültige JavaScript aus.

Wenn Sie z. B. die aktuelle Uhrzeit anzeigen möchten, können Sie den folgenden Code verwenden:

<div>{ Date.now() }</div>

Erstellen einer RecipeTitle-Komponente

In unserem Beispiel erstellen wir eine Komponente für den Titel eines Rezepts. Wir verwenden eine JavaScript-Variable für den Titel, um zu zeigen, wie React dynamische Daten anzeigen kann. In zukünftigen Einheiten wird gezeigt, wie Sie mit komplexeren Daten arbeiten können.

1. Erstellen Sie eine neue Datei im Ordner src. Nennen Sie sie RecipeTitle.jsx.

2. Fügen Sie RecipeTitle.jsx den folgenden Code hinzu:

   import React from 'react';
   
   function RecipeTitle() {
       const title = 'Mashed potatoes';
       return (
           <h2>{ title }</h2>
       )
   };
   export default RecipeTitle;
   

Untersuchen des Codes

Beachten Sie, dass wir eine Konstante mit dem Namen title erstellen. Anschließend verwenden wir die Handlebarsyntax { }, um React mitzuteilen, dass der Wert von title im Element <h2> angezeigt werden soll. Diese Funktion von JSX ermöglicht uns das Mischen von JavaScript und HTML.

Verwenden der RecipeTitle-Komponente

Wir zeigen RecipeTitle in unserer Anwendung an, indem wird dies zu App hinzufügen.

1. Öffnen Sie src/App.jsx.

2. Fügen Sie nach der Zeile import React from 'react'; (dies sollte Zeile 2 sein) den folgenden Code hinzu:

   import RecipeTitle from './RecipeTitle'
   

3. Verwenden Sie RecipeTitle als HTML-Element, indem Sie unterhalb der Syntax <h1>Recipe Manager</h1> folgenden Code hinzufügen:

   <RecipeTitle />
   

Untersuchen des Codes

Im Folgenden finden Sie den gesamten Inhalt der src/App.jsx-Datei:

import React from 'react';
import RecipeTitle from './RecipeTitle'

function App() {
    return (
        <article>
            <h1>Recipe Manager</h1>
            <RecipeTitle />
        </article>
    )
}

export default App;

Weitgehend ähnlich, wie wir <App /> wie ein HTML-Element verwendet haben, können wir RecipeTitle verwenden. Dieses Beispiel zeigt das Wesentliche der Erstellung von React-Anwendungen: Sie erstellen und verwenden Komponenten, um Ihre Anwendung zu erstellen.

Anzeigen der Ergebnisse

Speichern Sie alle Dateien. Der Browser sollte automatisch aktualisiert werden und die aktualisierte Seite anzeigen. Die Überschrift Mashed potatoes wird am oberen Rand der Seite angezeigt.

Weiter