Proptype Array mit Shape React

1. PropTypes-Form in React
2. Fazit

Das Codieren auf React ist eine angenehme Übung, bis eine App bereitgestellt wird und die App aufgrund von Fehlern und Bugs fehlschlägt.

Zum Glück haben wir die Abhängigkeit von React proptype, um uns aus der Patsche zu helfen. Requisiten in React sind die Abkürzung für Eigenschaften, und es gibt verschiedene Requisiten in React: Zahl, Zeichenfolgen, Boolean, Objekt usw.

Was proptype tut, ist, dass es die Art der Requisiten überprüft, die wir in unseren Codes übergeben, um sicherzustellen, dass es die richtige ist; Wenn wir einen falschen übergeben, warnt der proptype über die Konsole des Browsers.

PropTypes-Form in React

Das PropTypes.Shape() bietet eine tiefere Ebene der Typprüfung und -validierung; es durchsucht die innere Struktur eines Arrays nach falschen Requisiten.

Um diese Funktion zu verwenden, müssen wir sie in dem Projektordner installieren, an dem wir arbeiten, indem wir Folgendes eingeben: npm i prop-types. Wenn die Installation abgeschlossen ist, gehen wir zum Codierungsteil.

Schauen wir uns ein Beispiel an, das die PropTypes.shape() in Aktion zeigt.

Im Ordner src erstellen wir eine neue Datei, nennen sie Component.js, navigieren zu der Datei und importieren die proptypes, wie unten gezeigt.

Codeausschnitt - Component.js:

import PropTypes from 'prop-types'

function Component() {
  return null
}

Component.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  })
}

export default Component;

Da wir möchten, dass die proptypes die String- und Zahlenprops des Datums, das wir in der App.js rendern möchten, auschecken, packen wir die Komponenten name und age in die PropTypes.shape.

Als nächstes navigieren wir zur Datei App.js und importieren die Datei Component.js wie unten.

Codeschnipsel - App.js:

import Component from './Component'

function App() {
  return < Component person = {
    {
      name: 'Kyle', age: '26'
    }
  } />
}

export default App

Ausgabe:

Wenn wir die Konsole des Browsers öffnen, sehen wir den Fehler im angehängten Screenshot, weil das Prop age als String statt als Zahl übergeben wird. Sobald diese Anomalie behoben ist, verschwindet das Fehlerprotokoll.

Das ist das Tolle an der Nutzung der Abhängigkeit proptype.

Fazit

Die Effektivität der PropTypes kann gar nicht hoch genug eingeschätzt werden, denn sie eignet sich hervorragend, um Fehler und Bugs direkt vor Ort zu erkennen. Es hilft uns, genauere und gut strukturierte Codes zu schreiben.