JSON naar React PropTypes in enkele seconden — Numio

Verandert een voorbeeld van een props-object in JSON in een React propTypes-object. Geneste objecten worden PropTypes.shape, stringarrays PropTypes.arrayOf(PropTypes.string) en nulwaarden PropTypes.any.

Runtime prop-controles toevoegen aan een JavaScript React-component op basis van een voorbeeld van de gegevens die het ontvangt.

JSON

PropTypes

Wanneer gebruik je dit?

Runtime prop-controles toevoegen aan een JavaScript React-component op basis van een voorbeeld van de gegevens die het ontvangt.
Het documenteren van de rekwisieten van een verouderde klassencomponent met bekende voorbeeldgegevens.

Hoe werkt het

Plak een JSON-object met voorbeeldrekwisieten; een rootarray van objecten wordt eerst samengevoegd tot één object.
Lees het const propTypes = {...} blok; geneste objecten verschijnen als PropTypes.shape({...}).
Kopieer het, voeg import PropTypes toe uit "prop-types", wijs het toe aan MyComponent.propTypes en voeg waar nodig .isRequired toe.

JSON rekwisieten

{
  "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 en beperkingen

Draait in een browser Web Worker met de eigen generator van de site en vervolgens Prettier; geen serververzoek.

Er is geen prop gemarkeerd met .isRequired, en functies, elementen of opsommingen kunnen niet worden afgeleid uit JSON.

Voor een array met objecten worden alle items samengevoegd tot één PropTypes.shape, zodat sleutels die alleen in latere items voorkomen, worden opgenomen.

Arrays van het gemengde type worden PropTypes.arrayOf(PropTypes.oneOfType([...])), geneste arrays arrayOf(arrayOf(...)) en lege arrays PropTypes.array.

FAQ

Kan ik een JSON-array plakken?

Ja, als het objecten bevat: de items worden samengevoegd tot één object, zodat het resultaat elke sleutel weergeeft die in elk item is gevonden. Een array van tekenreeksen of getallen in de root wordt afgewezen.

Hoe worden nulwaarden getypt?

Zoals PropTypes.any, omdat null niets zegt over het echte type. Vervang deze door de verwachte validator, bijvoorbeeld PropTypes.string.

Werkt PropTypes nog steeds in React 19?

Nee. React 19 heeft de propTypes-controle verwijderd, dus de definities worden stilzwijgend genegeerd. Gebruik deze uitgang met React 18 of eerder, of schakel over naar TypeScript-typen.

Specificaties en referenties

prop-types op GitHub