JSON in React-PropTypes umwandeln — Numio

Wandelt ein Beispiel-Props-Objekt in JSON in ein React-propTypes-Objekt um. Verschachtelte Objekte werden zu PropTypes.shape, String-Arrays zu PropTypes.arrayOf(PropTypes.string) und null-Werte zu PropTypes.any.

Einer JavaScript-React-Komponente Prop-Prüfungen zur Laufzeit hinzufügen, ausgehend von einem Beispiel der Daten, die sie erhält.

JSON

PropTypes

Wann sie hilft

Einer JavaScript-React-Komponente Prop-Prüfungen zur Laufzeit hinzufügen, ausgehend von einem Beispiel der Daten, die sie erhält.
Die Props einer älteren Klassenkomponente anhand bekannter Beispieldaten dokumentieren.

Anwendung

Füge ein JSON-Objekt mit Beispiel-Props ein; ein Root-Array von Objekten wird zuerst zu einem Objekt zusammengeführt.
Lies den Block const propTypes = {...}; verschachtelte Objekte erscheinen als PropTypes.shape({...}).
Kopiere ihn, füge import PropTypes from "prop-types" hinzu, weise ihn MyComponent.propTypes zu und ergänze .isRequired, wo nötig.

JSON-Props

{
  "title": "Release notes",
  "count": 3,
  "visible": true,
  "tags": ["web", "react"],
  "author": { "name": "Ada", "avatarUrl": "https://example.com/a.png" },
  "links": [
    { "label": "Docs" },
    { "label": "Repo", "url": "https://example.com/repo" }
  ],
  "badge": null
}

React PropTypes

const propTypes = {
  title: PropTypes.string,
  count: PropTypes.number,
  visible: PropTypes.bool,
  tags: PropTypes.arrayOf(PropTypes.string),
  author: PropTypes.shape({
    name: PropTypes.string,
    avatarUrl: PropTypes.string,
  }),
  links: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      url: PropTypes.string,
    }),
  ),
  badge: PropTypes.any,
}

Details und Einschränkungen

Läuft in einem Web Worker im Browser mit dem eigenen Generator der Seite, danach Prettier; keine Serveranfrage.

Keine Prop wird als .isRequired markiert, und Funktionen, Elemente oder Enums lassen sich nicht aus JSON ableiten.

Bei einem Array von Objekten werden alle Elemente zu einem PropTypes.shape zusammengeführt, sodass auch Schlüssel enthalten sind, die erst in späteren Elementen vorkommen.

Arrays mit gemischten Typen werden zu PropTypes.arrayOf(PropTypes.oneOfType([...])), verschachtelte Arrays zu arrayOf(arrayOf(...)) und leere Arrays zu PropTypes.array.

FAQ

Kann ich ein JSON-Array einfügen?

Ja, wenn es Objekte enthält: Die Elemente werden zu einem Objekt zusammengeführt, sodass das Ergebnis jeden Schlüssel auflistet, der in irgendeinem Element vorkommt. Ein Array aus Strings oder Zahlen auf oberster Ebene wird abgelehnt.

Wie werden null-Werte typisiert?

Als PropTypes.any, weil null nichts über den tatsächlichen Typ aussagt. Ersetze es durch den erwarteten Validator, zum Beispiel PropTypes.string.

Funktionieren PropTypes noch in React 19?

Nein. React 19 hat die propTypes-Prüfung entfernt, die Definitionen werden also stillschweigend ignoriert. Verwende diese Ausgabe mit React 18 oder älter oder steige auf TypeScript-Typen um.

Spezifikationen und Referenzen

prop-types on GitHub