JSON na React PropTypes w kilka sekund — Numio

Kiedy go używać

• Dodawanie kontroli właściwości wykonawczych do komponentu React JavaScript na podstawie próbki otrzymanych danych.
• Dokumentowanie właściwości starszego komponentu klasy ze znanymi przykładowymi danymi.

Jak używać

1. Wklej obiekt JSON z przykładowymi rekwizytami; główna tablica obiektów jest najpierw łączona w jeden obiekt.
2. Przeczytaj blok const propTypes = {...}; zagnieżdżone obiekty pojawiają się jako PropTypes.shape({...}).
3. Skopiuj go, dodaj import PropTypes z „prop-types”, przypisz go do MyComponent.propTypes i dodaj .isRequired tam, gdzie to konieczne.

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

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

Szczegóły i ograniczenia

Działa w przeglądarce Web Worker z własnym generatorem witryny, następnie Prettier; brak żądania serwera.

Żaden prop nie jest oznaczony jako .isRequired, a funkcji, elementów ani wyliczeń nie można wywnioskować z JSON.

W przypadku tablicy obiektów wszystkie elementy są scalane w jeden kształt PropTypes, więc uwzględniane są klucze, które pojawiają się tylko w późniejszych elementach.

Tablice typu mieszanego to PropTypes.arrayOf(PropTypes.oneOfType([...])), tablice zagnieżdżone arrayOf(arrayOf(...)) i tablice puste PropTypes.array.

FAQ

Powiązane narzędzia

Specyfikacje i referencje

• typy prop na GitHub