Daten mit Props anzeigen

Bisher würde Ihre <Header />-Komponente, wenn Sie sie wiederverwenden, beide Male denselben Inhalt anzeigen.

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

Aber was, wenn Sie unterschiedlichen Text übergeben möchten oder die Informationen nicht im Voraus kennen, weil Sie Daten aus einer externen Quelle abrufen?

Normale HTML-Elemente haben Attribute, mit denen Sie Informationen übergeben können, die das Verhalten dieser Elemente ändern. Zum Beispiel ändert das src-Attribut eines <img>-Elements das angezeigte Bild. Das href-Attribut eines <a>-Tags ändert das Ziel des Links.

Auf ähnliche Weise können Sie Informationen als Eigenschaften an React-Komponenten übergeben. Diese werden props genannt. Betrachten Sie zum Beispiel die möglichen Varianten eines Buttons:

Ähnlich wie bei einer JavaScript-Funktion können Sie Komponenten entwerfen, die benutzerdefinierte Argumente (oder Props) akzeptieren, die das Verhalten der Komponente oder das, was beim Rendern auf dem Bildschirm sichtbar ist, ändern. Dann können Sie diese Props von Elternkomponenten an Kindkomponenten weitergeben.

Hinweis: In React fließen Daten die Komponentenbaumstruktur hinunter. Dies wird als unidirektionaler Datenfluss bezeichnet. State, der im nächsten Kapitel behandelt wird, kann als Props von Eltern- an Kindkomponenten weitergegeben werden.

Props verwenden

In Ihrer HomePage-Komponente können Sie eine benutzerdefinierte title-Prop an die Header-Komponente übergeben, genau wie Sie HTML-Attribute übergeben würden:

function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

Und Header, die Kindkomponente, kann diese Props als ihren ersten Funktionsparameter akzeptieren:

function Header(props) {
  return <h1>Develop. Preview. Ship.</h1>;
}

Wenn Sie console.log() für props aufrufen, sehen Sie, dass es sich um ein Objekt mit einer title-Eigenschaft handelt.

function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

Da props ein Objekt ist, können Sie Object Destructuring verwenden, um die Werte der props explizit in Ihren Funktionsparametern zu benennen:

function Header({ title }) {
  console.log(title); // "React"
  return <h1>Develop. Preview. Ship.</h1>;
}

Dann können Sie den Inhalt des <h1>-Tags mit Ihrer title-Variable ersetzen.

function Header({ title }) {
  console.log(title);
  return <h1>title</h1>;
}

Wenn Sie die Datei im Browser öffnen, werden Sie sehen, dass das Wort "title" angezeigt wird. Das liegt daran, dass React annimmt, dass Sie eine einfache Textzeichenkette im DOM rendern möchten.

Sie benötigen eine Möglichkeit, React mitzuteilen, dass dies eine JavaScript-Variable ist.

Variablen in JSX verwenden

Um die title-Prop zu verwenden, fügen Sie geschweifte Klammern {} hinzu. Dies ist eine spezielle JSX-Syntax, die es Ihnen ermöglicht, reguläres JavaScript direkt in Ihrem JSX-Markup zu schreiben.

function Header({ title }) {
  console.log(title);
  return <h1>{title}</h1>;
}

Sie können sich geschweifte Klammern als eine Möglichkeit vorstellen, in "JavaScript-Land" zu wechseln, während Sie sich in "JSX-Land" befinden. Sie können jeden JavaScript-Ausdruck (etwas, das zu einem einzelnen Wert ausgewertet wird) innerhalb der geschweiften Klammern hinzufügen. Zum Beispiel:

1. Eine Objekteigenschaft mit Punktnotation:

function Header(props) {
  return <h1>{props.title}</h1>;
}

2. Ein Template-Literal:

function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}

3. Der Rückgabewert einer Funktion:

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}
 
function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

4. Oder ternäre Operatoren:

function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

Sie können jetzt jede Zeichenkette an Ihre title-Prop übergeben, oder, wenn Sie den ternären Operator verwendet haben, können Sie sogar ganz auf die title-Prop verzichten, da Sie den Standardfall in Ihrer Komponente berücksichtigt haben:

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

Ihre Komponente akzeptiert jetzt eine generische title-Prop, die Sie in verschiedenen Teilen Ihrer Anwendung wiederverwenden können. Alles, was Sie tun müssen, ist die title-Zeichenkette zu ändern:

function HomePage() {
  return (
    <div>
      <Header title="React" />
      <Header title="A new title" />
    </div>
  );
}

Iterieren durch Listen

Es ist üblich, Daten zu haben, die Sie als Liste anzeigen müssen. Sie können Array-Methoden verwenden, um Ihre Daten zu manipulieren und UI-Elemente zu generieren, die im Stil identisch sind, aber unterschiedliche Informationen enthalten.

Fügen Sie das folgende Array mit Namen zu Ihrer HomePage-Komponente hinzu:

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Sie können dann die array.map()-Methode verwenden, um über das Array zu iterieren, und eine Pfeilfunktion, um einen Namen einem Listenelement zuzuordnen:

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Beachten Sie, wie Sie geschweifte Klammern verwendet haben, um zwischen "JavaScript" und "JSX" hin und her zu wechseln.

Wenn Sie diesen Code ausführen, wird React eine Warnung über eine fehlende key-Prop anzeigen. Das liegt daran, dass React etwas benötigt, um Elemente in einem Array eindeutig zu identifizieren, damit es weiß, welche Elemente im DOM aktualisiert werden müssen.

Sie können vorerst die Namen verwenden, da sie derzeit eindeutig sind, aber es wird empfohlen, etwas zu verwenden, das garantiert eindeutig ist, wie eine Artikel-ID.

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Zusätzliche Ressourcen:

• Props an eine Komponente übergeben
• Listen rendern
• Bedingtes Rendern