Anpassen von React-Komponenten mit Props

Der Autor hat Creative Commons dazu ausgewählt, im Rahmen des Programms Write for DOnations eine Spende zu erhalten.

Einführung

In diesem Tutorial erstellen Sie benutzerdefinierte Komponenten, indem Sie Props an Ihre Komponente übergeben. Props sind Argumente, die Sie einem JSX-Element bereitstellen. Sie sehen aus wie Standard-HTML-Props, sind jedoch nicht vordefiniert und können viele verschiedene JavaScript-Datentypen aufweisen, darunter Zahlen, Zeichenfolgen, Funktionen, Arrays und sogar andere React-Komponenten. Ihre benutzerdefinierten Komponenten können mithilfe von Props Daten anzeigen oder Daten verwenden, um die Komponenten interaktiv zu gestalten. Props sind ein wichtiger Bestandteil beim Erstellen von Komponenten, die an unterschiedliche Situationen angepasst werden können. Wenn Sie sich mit ihnen vertraut machen, erhalten Sie die Werkzeuge, um benutzerdefinierte Komponenten zu entwickeln, die mit besonderen Situationen umgehen können.

Nachdem Sie Ihrer Komponente Props hinzugefügt haben, definieren Sie mithilfe von PropTypes den Datentyp, den Sie für eine Komponente erwarten. PropTypes sind ein einfaches Typsystem, mit dem überprüft wird, ob die Daten zur Laufzeit mit den erwarteten Typen übereinstimmen. Sie dienen sowohl als Dokumentation als auch als Fehlerprüfung, damit Ihre Anwendung bei der Skalierung vorhersehbar bleibt.

Am Ende des Tutorials werden Sie eine Vielzahl von props verwenden, um eine kleine Anwendung zu erstellen, die ein Array von Tierdaten verwendet und die Informationen anzeigt, einschließlich Name, wissenschaftlicher Name, Größe, Ernährung und zusätzliche Informationen.

Voraussetzungen

• Sie benötigen eine Entwicklungsumgebung, die Node.js ausführt; dieses Tutorial wurde mit der Node.js-Version 10.20.1 und der npm-Version 6.14.4 getestet. Um dies unter MacOS oder Ubuntu 18.04 zu installieren, folgen Sie den Schritten in Installation von Node.js und Erstellen einer lokalen Entwicklungsumgebung auf MacOS oder dem Abschnitt Installation unter Verwendung eines PPA von Installation von Node.js auf Ubuntu 18.04.

• In diesem Tutorial verwenden Sie die Create React App. Anweisungen zur Installation einer Anwendung mit Create React App finden Sie unter Einrichten eines React-Projekts mit Create React App. In diesem Tutorial werden auch Kenntnisse über React-Komponenten vorausgesetzt, die Sie in unserem Tutorial Erstellen benutzerdefinierte Komponenten in React kennenlernen können.

• Sie benötigen auch Grundkenntnisse über JavaScript, die Sie in Codieren in JavaScript finden, sowie Grundkenntnisse über HTML und CSS. Eine gute Ressource für HTML und CSS ist das Mozilla Developer Network.

Schritt 1 - Erstellen eines leeren Projekts

In diesem Schritt erstellen Sie unter Verwendung der Create React App ein neues Projekt. Anschließend löschen Sie das Beispielprojekt und die zugehörigen Dateien, die beim Bootstrap des Projekts installiert werden. Schließlich erstellen Sie eine einfache Dateistruktur, um Ihre Komponenten zu organisieren.

Beginnen Sie mit der Erstellung eines neuen Projekts. Führen Sie in Ihrer Befehlszeile das folgende Skript aus, um ein neues Projekt mit create-react-app zu installieren:

npx create-react-app prop-tutorial

Nachdem das Projekt erstellt ist, wechseln Sie in das Verzeichnis:

cd prop-tutorial

Beginnen Sie das Projekt in einer neuen Registerkarte oder einem neuen Fenster des Terminals mit dem Create React App start-Skript. Der Browser aktualisiert Änderungen automatisch; lassen Sie also dieses Skript während der gesamten Dauer Ihrer Arbeit laufen:

npm start

Sie erhalten einen funktionierenden lokalen Server. Falls sich das Projekt nicht in einem Browserfenster geöffnet hat, können Sie es durch Navigieren zu http://localhost:3000/ öffnen. Wenn Sie dies von einem Remote-Server aus ausführen, ist die Adresse http://your_domain:3000.

Ihr Browser wird mit einer einfachen React-Anwendung geladen, die Teil der Create React App ist:

Sie erstellen einen völlig neuen Satz benutzerdefinierter Komponenten. Sie löschen zunächst einigen Standardcode, damit Sie ein leeres Projekt haben können.

Zuerst öffnen Sie src/App.js in einem Texteditor. Das ist die Stammkomponente, die in die Seite eingebunden wird. Alle Komponenten beginnen von hier. Weitere Informationen zu App.js finden Sie unter Einrichten eines React-Projekts mit Create React App.

Öffnen Sie src/App.js mit dem folgenden Befehl:

nano src/App.js

Sie sehen eine Datei wie diese:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Löschen Sie die Zeile import logo from './logo.svg';. Ersetzen Sie dann alles in der return-Anweisung, um eine Reihe leerer Tags zurückzugeben: <></>. Dadurch erhalten Sie eine Validierungsseite, die nichts zurückgibt. Der endgültige Code sieht so aus:

import React from 'react';
import './App.css';

function App() {
  return <></>;
}

export default App;

Speichern und schließen Sie den Texteditor.

Abschließend löschen Sie das Logo. Sie werden es nicht in Ihrer Anwendung verwenden und Sie sollten unbenutzte Dateien entfernen, während Sie arbeiten. Es wird Sie in Zukunft vor Verwirrung bewahren.

Geben Sie im Terminalfenster den folgenden Befehl ein:

rm src/logo.svg

Wenn Sie in Ihren Browser schauen, sehen Sie einen leeren Bildschirm.

Nachdem Sie das Create React App-Beispielprojekt gelöscht haben, erstellen Sie eine einfache Dateistruktur. Dies hilft Ihnen, Ihre Komponenten isoliert und unabhängig zu halten.

Erstellen Sie im Verzeichnis src ein Verzeichnis mit dem Namen components. Dies enthält alle Ihre benutzerdefinierten Komponenten.

mkdir src/components

Jede Komponente verfügt über ein eigenes Verzeichnis zum Speichern der Komponentendatei zusammen mit den Stilen, gegebenenfalls Bildern und Tests.

Erstellen Sie ein Verzeichnis für App:

mkdir src/components/App

Verschieben Sie alle App-Dateien in dieses Verzeichnis. Verwenden Sie den Platzhalter *, um alle mit App. beginnenden Dateien auszuwählen, unabhängig von der Dateierweiterung. Verwenden Sie dann den Befehl mv, um sie in das neue Verzeichnis zu setzen.

mv src/App.* src/components/App

Aktualisieren Sie abschließend den relativen Importpfad in index.js, der Stammkomponente, die den gesamten Prozess bootet.

nano src/index.js

Die Import-Anweisung muss auf die Datei App.js im App-Verzeichnis verweisen. Nehmen Sie daher die folgende hervorgehobene Änderung vor:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Speichern und schließen Sie die Datei.

Nachdem das Projekt eingerichtet wurde, können Sie Ihre erste Komponente erstellen.

Schritt 2 - Erstellen dynamischer Komponenten mit Props

In diesem Schritt erstellen Sie eine Komponente, die sich basierend auf den als Props bezeichneten Eingabeinformationen ändert. Props sind die Argumente, die Sie an eine Funktion oder Klasse übergeben. Da Ihre Komponenten jedoch mit JSX in HTML-ähnliche Objekte umgewandelt werden, übergeben Sie die Props wie HTML-Attribute. Im Gegensatz zu HTML-Elementen können Sie viele verschiedene Datentypen übergeben, von Zeichenfolgen über Arrays bis hin zu Objekten und sogar Funktionen.

Hier erstellen Sie eine Komponente, die Informationen zu Tieren anzeigt. Diese Komponente verwendet den Namen und den wissenschaftlichen Namen des Tieres als Zeichenfolgen, die Größe als Ganzzahl, die Ernährung als ein Array von Zeichenfolgen und zusätzliche Informationen als Objekt. Sie geben die Informationen als Props an die neue Komponente weiter und verbrauchen diese Informationen in Ihrer Komponente.

Am Ende dieses Schritts haben Sie eine benutzerdefinierte Komponente, die verschiedene Props verbraucht. Sie können die Komponente auch wiederverwenden, um ein Datenarray mit einer gemeinsamen Komponente anzuzeigen.

Hinzufügen von Daten

Zunächst benötigen Sie einige Beispieldaten. Erstellen Sie eine Datei im Verzeichnis src/App mit dem Namen data.

touch src/components/App/data.js

Öffnen Sie die neue Datei in Ihrem Texteditor:

nano src/components/App/data.js

Fügen Sie als Nächstes ein Array von Objekten hinzu, die Sie als Beispieldaten verwenden:

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
  {
    name: 'Gorilla',
    scientificName: 'Gorilla beringei',
    size: 205,
    diet: ['plants', 'insects'],
    additional: {
      notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
    }
  },
  {
    name: 'Zebra',
    scientificName: 'Equus quagga',
    size: 322,
    diet: ['plants'],
    additional: {
      notes: 'There are three different species of zebra.',
      link: 'https://en.wikipedia.org/wiki/Zebra'
    }
  }
]

Das Array von Objekten enthält eine Vielzahl von Daten und bietet Ihnen die Möglichkeit, eine Vielzahl von Props auszuprobieren. Jedes Objekt ist ein separates Tier mit dem Namen des Tieres, dem wissenschaftlichen Namen, der Größe, der Ernährung und einem optionalen Feld namens additional, das Links oder Notizen enthält. In diesem Code haben Sie auch das Array als default exportiert.

Speichern und schließen Sie die Datei.

Erstellen von Komponenten

Erstellen Sie als nächstes eine Platzhalterkomponente namens AnimalCard. Diese Komponente nimmt schließlich Props und zeigt die Daten an.

Erstellen Sie zunächst ein Verzeichnis in src/components mit dem Namen AnimalCard und verwenden Sie touch in einer Datei mit dem Namen src/components/AnimalCard/AnimalCard.js und einer CSS-Datei mit dem Namen src/components/AnimalCard/AnimalCard.css.

mkdir src/components/AnimalCard
touch src/components/AnimalCard/AnimalCard.js
touch src/components/AnimalCard/AnimalCard.css

Öffnen Sie AnimalCard.js in Ihrem Texteditor:

nano src/components/AnimalCard/AnimalCard.js

Fügen Sie eine Basiskomponente hinzu, die das CSS importiert und ein <h2>-Tag zurückgibt.

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard() {
  return <h2>Animal</h2>
}

Speichern und schließen Sie die Datei. Jetzt müssen Sie die Daten und die Komponente in Ihre Basis-App-Komponente importieren.

Öffnen Sie src/components/App/App.js:

nano src/components/App/App.js

Importieren Sie die Daten und die Komponente und bilden eine Schleife über die Daten, die die Komponente für jedes Element in dem Array zurückgeben:

import React from 'react';
import data from './data';
import AnimalCard from '../AnimalCard/AnimalCard';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard key={animal.name}/>
      ))}
    </div>
  )
}

export default App;

Speichern und schließen Sie die Datei. Hier verwenden Sie die .map()-Array-Methode, um die Daten zu iterieren. Zusätzlich zum Hinzufügen dieser Schleife haben Sie ein wrapping-div mit einer Klasse, die Sie für das Styling verwenden, und ein <h1>-Tag zum Beschriften Ihres Projekts.

Wenn Sie speichern, wird der Browser neu geladen und Sie sehen für jede Karte eine Beschriftung.

Fügen Sie als nächstes ein Styling hinzu, um die Elemente auszurichten. Öffnen Sie App.css:

nano src/components/App/App.css

Ersetzen Sie den Inhalt durch Folgendes, um die Elemente anzuordnen:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.wrapper h1 {
    text-align: center;
    width: 100%;
}

Dadurch wird Flexbox verwendet, um die Daten neu anzuordnen, sodass sie ausgerichtet werden. Das padding bietet Platz im Browserfenster. justify-content verteilt den zusätzlichen Abstand zwischen den Elementen, und .wrapper h1 gibt der Beschriftung Animal die volle Breite.

Speichern und schließen Sie die Datei. Wenn Sie dies tun, wird der Browser aktualisiert und Sie sehen einige voneinander beabstandete Daten.

Hinzufügen von Props

Nachdem Sie Ihre Komponenten eingerichtet haben, können Sie Ihr eine erste Prop hinzufügen. Als Sie eine Schleife über Ihre Daten gelegt haben, hatten Sie Zugriff auf jedes Objekt in dem Array data und die darin enthaltenen Elemente. Sie fügen jedes Datenelement einer separaten Prop hinzu, die Sie dann in Ihrer AnimalCard-Komponente verwenden.

Öffnen Sie App.js:

nano src/components/App/App.js

Fügen Sie AnimalCard eine Prop von name hinzu.

import React from 'react';
...
function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          key={animal.name}
          name={animal.name}
        />
      ))}
    </div>
  )
}

export default App;

Speichern und schließen Sie die Datei. Die Prop name sieht aus wie ein Standard-HTML-Attribut, aber anstelle einer Zeichenfolge übergeben Sie die Eigenschaft name aus dem Objekt animal in geschweiften Klammern.

Nachdem Sie eine Prop an die neue Komponente übergeben haben, müssen Sie sie verwenden. Öffnen Sie AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Alle Props, die Sie an die Komponente übergeben, werden in einem Objekt gesammelt, das das erste Argument Ihrer Funktion ist. Destrukturieren Sie das Objekt, um einzelne Props herauszuziehen:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard(props) {
  const { name } = props;
  return (
    <h2>{name}</h2>
  );
}

Beachten Sie, dass Sie eine Prop nicht destrukturieren müssen, um sie zu verwenden. Dies ist jedoch eine nützliche Methode für den Umgang mit den Beispieldaten in diesem Tutorial.

Nachdem Sie das Objekt destrukturiert haben, können Sie die einzelnen Daten verwenden. In diesem Fall verwenden Sie den Titel in einem <h2>-Tag, das den Wert mit geschweiften Klammern umgibt, damit React ihn als JavaScript auswerten kann.

Sie können auch eine Eigenschaft für das prop-Objekt in Punktnotation verwenden. Als Beispiel könnten Sie ein <h2>-Element wie das folgende erstellen: <h2>{props.title}</h2>. Der Vorteil der Destrukturierung besteht darin, dass Sie nicht verwendete Props Requisiten sammeln und den Object-Rest-Operator verwenden können.

Speichern und schließen Sie die Datei. Wenn Sie dies tun, wird der Browser neu geladen und Sie sehen den spezifischen Namen für jedes Tier anstelle eines Platzhalters.

Die Eigenschaft name ist eine Zeichenfolge, aber Props können beliebige Datentypen sein, die Sie an eine JavaScript-Funktion übergeben können. Um dies zu sehen, fügen Sie den Rest der Daten hinzu.

Öffnen Sie die Datei App.js:

nano src/components/App/App.js

Fügen Sie eine Prop für jedes der folgenden Elemente hinzu: scientificName, size, diet und additional. Diese schließen Zeichenfolgen, Ganzzahlen, Arrays und Objekte ein.

import React from 'react';
...

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {albums.map(album => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

Da Sie ein Objekt erstellen, können Sie sie in beliebiger Reihenfolge hinzufügen. Alphabetisieren erleichtert das Einrichten einer Liste von Props, besonders in einer größeren Liste. Sie können sie auch in derselben Zeile hinzufügen, aber durch Trennen in eine pro Zeile bleiben die Dinge lesbar.

Speichern und schließen Sie die Datei. Öffnen Sie AnimalCard.js.

nano src/components/AnimalCard/AnimalCard.js

Destrukturieren Sie diesmal die Prop in der Funktionsparameterliste und verwenden Sie die Daten in der Komponente:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
    </div>
  );
}

Nachdem Sie die Daten abgerufen haben, können Sie scientificName und size in Überschriften-Tags einfügen. Sie müssen das Array jedoch in eine Zeichenfolge konvertieren, damit React es auf der Seite anzeigen kann. Sie können dies mit join (',') tun, wodurch eine durch Kommas getrennte Liste erstellt wird.

Speichern und schließen Sie die Datei. Wenn Sie dies tun, wird der Browser aktualisiert und Sie sehen die strukturierten Daten.

Sie können eine ähnliche Liste mit dem Objekt additional erstellen, aber stattdessen eine Funktion hinzufügen, um den Benutzer über die Daten zu informieren. Dies gibt Ihnen die Möglichkeit, Funktionen als Props zu übergeben und dann Daten innerhalb einer Komponente zu verwenden, wenn Sie eine Funktion aufrufen.

Öffnen Sie App.js:

nano src/components/App/App.js

Erstellen Sie eine Funktion namens showAdditionalData, die das Objekt in eine Zeichenfolge konvertiert und als Alert anzeigt.

import React from 'react';
...

function showAdditional(additional) {
  const alertInformation = Object.entries(additional)
    .map(information => `${information[0]}: ${information[1]}`)
    .join('\n');
  alert(alertInformation)
};

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          showAdditional={showAdditional}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

Die Funktion showAdditional konvertiert das Objekt in ein Array von Paaren, wobei das erste Element der Schlüssel und das zweite der Wert ist. Anschließend bildet sie die Daten ab, indem sie das Schlüsselpaar in eine Zeichenfolge konvertiert. Anschließend werden sie mit einem Zeilenumbruch - \n - verbunden, bevor die vollständige Zeichenfolge an die Alert-Funktion übergeben wird.

Da JavaScript Funktionen als Argumente akzeptieren kann, kann React auch Funktionen als Props akzeptieren. Sie können showAdditional daher als Prop mit dem Namen showAdditional an AnimalCard übergeben.

Speichern und schließen Sie die Datei. Öffnen Sie AnimalCard:

nano src/components/AnimalCard/AnimalCard.js

Ziehen Sie die Funktion showAdditional aus dem Props-Objekt und erstellen Sie dann einen <button> mit einem onClick-Event, das die Funktion mit dem Objekt additional aufruft:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  showAdditional,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
      <button onClick={() => showAdditional(additional)}>More Info</button>
    </div>
  );
}

Speichern Sie die Datei. Wenn Sie dies tun, wird der Browser aktualisiert und Sie sehen eine Schaltfläche nach jeder Karte. Wenn Sie auf die Schaltfläche klicken, erhalten Sie einen Alert mit den zusätzlichen Daten.

Wenn Sie versuchen, auf More Info für den Lion zu klicken, wird eine Fehlermeldung angezeigt. Das liegt daran, dass es keine zusätzlichen Daten für den Löwen gibt. Wie Sie das beheben können, erfahren Sie in Schritt 3.

Fügen Sie abschließend der Musikkarte etwas Styling hinzu. Fügen Sie dem div in AnimalCard einen className von animal-wrapper hinzu:

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
...
  return (
    <div className="animal-wrapper">
...
    </div>
  )
}

Speichern und schließen Sie die Datei. Öffnen Sie AnimalCard.css:

nano src/components/AnimalCard/AnimalCard.css

Fügen Sie CSS hinzu, um den Karten und der Schaltfläche einen kleinen Rahmen und eine Füllung zu geben:

.animal-wrapper {
    border: solid black 1px;
    margin: 10px;
    padding: 10px;
    width: 200px;
}

.animal-wrapper button {
    font-size: 1em;
    border: solid black 1px;
    padding: 10;
    background: none;
    cursor: pointer;
    margin: 10px 0;
}

Dieses CSS fügt der Karte einen schmalen Rand hinzu und ersetzt das Standard-Schaltflächen-Styling durch einen Rahmen und eine Füllung. cursor:pointer ändert den Cursor, wenn Sie mit der Maus über die Schaltfläche fahren.

Speichern und schließen Sie die Datei. Wenn Sie dies tun, wird der Browser aktualisiert und Sie sehen die Daten auf einzelnen Karten.

Zu diesem Zeitpunkt haben Sie zwei benutzerdefinierte Komponenten erstellt. Sie haben Daten von der ersten Komponente mithilfe von Props an die zweite Komponente übergeben. Die Props enthielten eine Vielzahl von Daten wie Zeichenfolgen, Ganzzahlen, Arrays, Objekte und Funktionen. In Ihrer zweiten Komponente haben Sie die Props verwendet, um mit JSX eine dynamische Komponente zu erstellen.

Im nächsten Schritt verwenden Sie ein Typsystem namens prop-types, um die Struktur anzugeben, die von Ihrer Komponente erwartet wird. Dies schafft Vorhersagbarkeit in Ihrer App und beugt Fehlern vor.

Schritt 3 - Erstellen vorhersehbarer Props mit PropTypes und defaultProps

In diesem Schritt fügen Sie Ihren Komponenten mit PropTypes ein leichtes Typsystem hinzu. PropTypes verhalten sich wie andere Typsysteme, indem sie explizit den Datentyp definieren, den Sie für eine bestimmte Prop erwarten. Sie geben Ihnen auch die Möglichkeit, Standarddaten in Fällen zu definieren, in denen die Prop nicht immer benötigt wird. Im Gegensatz zu den meisten Typsystemen ist PropTypes eine Laufzeitprüfung. Wenn die Props also nicht mit dem Typ übereinstimmen, wird der Code weiterhin kompiliert, es wird jedoch auch ein Konsolenfehler angezeigt.

Am Ende dieses Schritts fügen Sie Ihrer benutzerdefinierten Komponente Vorhersagbarkeit hinzu, indem Sie den Typ für jede Prop definieren. Dadurch wird sichergestellt, dass die nächste Person, die an der Komponente arbeitet, eine klare Vorstellung von der Struktur der Daten hat, die die Komponente benötigt.

Das prop-types-Paket ist Teil der Installation von Create React App. Um es zu verwenden, müssen Sie es lediglich in Ihre Komponente importieren.

Öffnen Sie AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Importieren Sie dann PropTypes aus prop-types:

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

Fügen Sie PropTypes direkt zu der Komponentenfunktion hinzu. In JavaScript sind Funktionen Objekte, d. h. Sie können Eigenschaften mithilfe der Punktsyntax hinzufügen. Fügen Sie AnimalCard.js die folgenden PropTypes hinzu:

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
  diet: PropTypes.arrayOf(PropTypes.string).isRequired,
  name: PropTypes.string.isRequired,
  scientificName: PropTypes.string.isRequired,
  showAdditional: PropTypes.func.isRequired,
  size: PropTypes.number.isRequired,
}

Speichern und schließen Sie die Datei.

Wie Sie sehen können, gibt es viele verschiedene PropTypes. Dies ist nur eine kleine Auswahl; in der offiziellen React-Dokumentation finden Sie die anderen, die Sie verwenden können.

Beginnen wir mit der Prop name. Hier geben Sie an, dass name ein string sein muss. Die Eigenschaft scientificName ist dieselbe. size ist eine Zahl, die sowohl Gleitkommazahlen wie 1,5 als auch Ganzzahlen wie 6 enthalten kann. showAdditional ist eine Funktion (func).

diet ist hingegen etwas anders. In diesem Fall geben Sie an, dass diet ein array sein soll, aber Sie müssen auch angeben, was dieses Array enthalten soll. In diesem Fall enthält das Array nur Zeichenfolgen. Wenn Sie Typen mischen möchten, können Sie eine andere Prop namens oneOfType verwenden, die ein Array gültiger PropTypes verwendet. Sie können oneOfType überall verwenden. Wenn Sie also möchten, dass size entweder eine Zahl oder eine Zeichenfolge ist, können Sie sie wie folgt ändern:

size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

Die Prop additional ist auch etwas komplexer. In diesem Fall geben Sie ein Objekt an, aber um etwas klarer zu sein, geben Sie an, was das Objekt enthalten soll. Dazu verwenden Sie PropTypes.shape, das ein Objekt mit zusätzlichen Feldern verwendet, für die eigene PropTypes erforderlich sind. In diesem Fall sind link und notes beide PropTypes.string.

Derzeit sind alle Daten wohlgeformt und stimmen mit den Props überein. Öffnen Sie Ihre Daten, um zu sehen, was passiert, wenn die PropTypes nicht übereinstimmen:

nano src/components/App/data.js

Ändern Sie die Größe in eine Zeichenfolge in dem ersten Element:

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: '140',
    diet: ['meat'],
  },
...
]

Speichern Sie die Datei. Wenn Sie dies tun, wird der Browser aktualisiert und Sie sehen eine Fehlermeldung in der Konsole.

Error
index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`.
    in AnimalCard (at App.js:18)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Im Gegensatz zu anderen Typsystemen wie TypeScript gibt PropTypes beim Erstellen keine Warnung aus. Solange keine Codefehler vorliegen, wird es dennoch kompiliert. Dies bedeutet, dass Sie versehentlich Code mit Prop-Fehlern veröffentlichen könnten.

Ändern Sie die Daten wieder auf den richtigen Typ:

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
...
]

Speichern und schließen Sie die Datei.

Öffnen Sie AnimalCard.js:

nano src/components/AnimalCard/AnimalCard.js

Jede Prop außer additional hat die Eigenschaft isRequired. Das bedeutet, dass sie benötigt werden. Wenn Sie keine erforderliche Prop einfügen, wird der Code weiterhin kompiliert, es wird jedoch ein Laufzeitfehler in der Konsole angezeigt.

Wenn keine Prop benötigt wird, können Sie einen Standardwert hinzufügen. Es wird empfohlen, immer einen Standardwert hinzuzufügen, um Laufzeitfehler zu vermeiden, wenn keine Prop erforderlich ist. In der AnimalCard-Komponente rufen Sie beispielsweise eine Funktion mit den additional-Daten auf. Wenn sie nicht vorhanden ist, versucht die Funktion, ein nicht vorhandenes Objekt zu ändern, und die Anwendung stürzt ab.

Fügen Sie für additional eine defaultProp hinzu, um dieses Problem zu vermeiden:

import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
...
}

AnimalCard.defaultProps = {
  additional: {
    notes: 'No Additional Information'
  }
}

Sie fügen der Funktion die defaultProps mithilfe der Punktsyntax hinzu, genau wie Sie es mit propTypes getan haben, und fügen dann einen Standardwert hinzu, den die Komponente verwenden sollte, wenn die Prop undefiniert ist. In diesem Fall passen Sie an die Form von additional an, einschließlich einer Meldung, dass keine zusätzlichen Informationen vorhanden sind.

Speichern und schließen Sie die Datei. Wenn Sie dies tun, wird der Browser aktualisiert. Klicken Sie nach der Aktualisierung auf die Schaltfläche More Info für Lion. Es gibt kein Feld additional in den Daten, daher ist die Prop undefiniert. Aber AnimalCard wird in der Standard-Prop ersetzt.

Jetzt sind Ihre Props gut dokumentiert und entweder erforderlich oder haben eine Standardeinstellung, um den vorhersehbaren Code sicherzustellen. Dies hilft zukünftigen Entwicklern (einschließlich Ihnen) zu verstehen, welche Props eine Komponente benötigt. Dies erleichtert das Austauschen und Wiederverwenden Ihrer Komponenten, indem Sie vollständige Informationen darüber erhalten, wie die Komponente die empfangenen Daten verwendet.

Zusammenfassung

In diesem Tutorial haben Sie mehrere Komponenten erstellt, die mithilfe von Props Informationen von einem übergeordneten Element anzeigen. Props geben Ihnen die Flexibilität, größere Komponenten in kleinere, fokussiertere Teile zu zerlegen. Da jetzt Ihre Daten nicht mehr eng mit Ihren Anzeigeinformationen verknüpft sind, können Sie entscheiden, wie Ihre Anwendung segmentiert werden soll.

Props sind ein wichtiges Werkzeug beim Erstellen komplexer Anwendungen und bieten die Möglichkeit, Komponenten zu erstellen, die sich an die empfangenen Daten anpassen können. Mit PropTypes erstellen Sie vorhersehbare und lesbare Komponenten, mit denen ein Team die Arbeit des anderen wiederverwenden kann, um eine flexible und stabile Codebasis zu erstellen. Wenn Sie weitere React-Tutorials konsultieren möchten, sehen Sie sich unsere React-Themenseite an oder kehren Sie zurück zur Seite der Reihe Codieren in React.js.