Da JSON a React PropTypes in pochi secondi — Numio

Trasforma un oggetto oggetti di scena di esempio in JSON in un oggetto React propTypes. Gli oggetti nidificati diventano PropTypes.shape, gli array di stringhe PropTypes.arrayOf(PropTypes.string) e i valori null PropTypes.any.

Aggiunta di controlli delle prop di runtime a un componente React JavaScript da un campione dei dati che riceve.

JSON

PropTypes

Quando usarlo

Aggiunta di controlli delle prop di runtime a un componente React JavaScript da un campione dei dati che riceve.
Documentare gli elementi di scena di un componente di classe legacy con dati di esempio noti.

Come si usa

Incolla un oggetto JSON di oggetti di scena di esempio; un array root di oggetti viene prima unito in un unico oggetto.
Leggi il blocco const propTypes = {...}; gli oggetti nidificati vengono visualizzati come PropTypes.shape({...}).
Copialo, aggiungi l'importazione PropTypes da "prop-types", assegnalo a MyComponent.propTypes e aggiungi .isRequired dove necessario.

Oggetti di scena JSON

{
  "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
}

Reagisci 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,
}

Dettagli e limiti

Viene eseguito in un browser Web Worker con il generatore del sito, quindi Prettier; nessuna richiesta del server.

Nessuna prop è contrassegnata con .isRequired e funzioni, elementi o enumerazioni non possono essere dedotti da JSON.

Per un array di oggetti, tutti gli elementi vengono uniti in un unico PropTypes.shape, quindi vengono incluse le chiavi che appaiono solo negli elementi successivi.

Gli array di tipo misto diventano PropTypes.arrayOf(PropTypes.oneOfType([...])), gli array nidificati arrayOf(arrayOf(...)) e gli array vuoti PropTypes.array.

FAQ

Posso incollare un array JSON?

Sì, se contiene oggetti: gli elementi vengono uniti in un unico oggetto, quindi il risultato elenca ogni chiave trovata in qualsiasi elemento. Un array di stringhe o numeri alla radice viene rifiutato.

Come vengono digitati i valori nulli?

Come PropTypes.any, perché null non dice nulla sul tipo reale. Sostituirlo con il validatore previsto, ad esempio PropTypes.string.

PropTypes funziona ancora in React 19?

No. React 19 ha rimosso il controllo propTypes, quindi le definizioni vengono silenziosamente ignorate. Usa questa uscita con React 18 o precedente, oppure passa ai tipi TypeScript.

Specifiche e riferimenti

tipi di prop su GitHub