reactjs / reactjs/react-docgen

Complex composition using `PropTypes.shape`

Offen
#255 0 Kommentare 6 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
TypeScript
Sterne
3.8k
Forks
316
Ø Merge
5 Std. 7 Min.
Gemergte PRs (30 T.)
4

Beschreibung

I have a component that looks something along the lines of

import A from './A';
import B from './B';

class MyComponent extends Component {
...
}

MyComponent.propTypes = {
  aProps: PropTypes.shape(A.propTypes),
  bProps: PropTypes.shape(B.propTypes),
  ...
};

Is there a way to make the parser detect that this is a composition rather than simple prop shapes?
I'm doing this because I don't want all the props to live on the wrapper component's scope but to contain each in their own prop, mainly to be able to distinguish what goes where so I don't accidentally pass props that both A and B may have but in reality shouldn't be the same like className, style, children, etc.

I would also like to know if this is possible:

import A from './A';
import VariantOfA from './VariantOfA';

class MyComponent extends Component {
...
}

MyComponent.propTypes = {
  aProps: PropTypes.oneOfType([PropTypes.shape(A.propTypes),PropTypes.shape(VariantOfA.propTypes)])
  ...
};

In this scenario I want to be able to represent with a single prop both A and VariantOfA because essentially they are the same with minor differences in prop types.

I would assume this could be the same for PropTypes.arrayOf and PropTypes.objectOf since they're not that different from PropTypes.oneOfType

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Das Issue nennt keine Dateien, Tests oder Parser-Einstiegspunkte. Verfolge daher zunächst nach, wie PropTypes.shape, oneOfType, arrayOf und objectOf derzeit behandelt werden. Vergleiche die angeforderten verschachtelten und Varianten-Komponentenbeispiele mit der generierten Dokumentation und definiere vor der Implementierung die erwartete Ausgabe und die Tests.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation, tooling
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.