Angesichts einer einfachen Komponente, die ihre Kinder rendert:
class ContainerComponent extends Component {
static propTypes = {
children: PropTypes.object.isRequired,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default ContainerComponent;
Frage: Was soll der PropTyp der Kinder-Requisite sein?
Wenn ich es als Objekt festlege, schlägt es fehl, wenn ich die Komponente mit mehreren untergeordneten Elementen verwende:
<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>
Achtung: Fehler prop Typ: Ungültige prop
children
vom Typarray
zugeführtContainerComponent
, erwartetobject
.
Wenn ich es als Array einstelle, schlägt es fehl, wenn ich ihm nur ein Kind gebe, dh:
<ContainerComponent>
<div>1</div>
</ContainerComponent>
Warnung: Fehlgeschlagener Requisitentyp: Ungültige Prop-Kinder des Typobjekts, das an ContainerComponent geliefert wurde, erwartetes Array.
Bitte raten Sie, sollte ich mich nicht die Mühe machen, einen propTypes-Check für untergeordnete Elemente durchzuführen?
reactjs
jsx
react-proptypes
d3ming
quelle
quelle
node
Antworten:
Versuchen Sie so etwas mit
oneOfType
oderPropTypes.node
oder
quelle
children
Typsobject
. ... ein Array erwartet“children: PropTypes.node
, dass dies in beiden Fällen funktioniert hat. Vielen Dank für die Vorschläge =)React.PropTypes.node
jedes renderbare Objekt beschrieben wird.PropTypes.node
. Das behandelt die folgende Korrektur: nichts, Zeichenfolge, einzelnes Element, mehrere Elemente, Fragment, Komponente.Für mich kommt es auf die Komponente an. Wenn Sie wissen, womit es gefüllt werden soll, sollten Sie versuchen, ausschließlich oder mehrere Typen mit folgenden Angaben anzugeben:
Ich finde jedoch meistens, dass ich mit allgemeineren Komponenten, die viele Arten von Kindern haben können, gerne Folgendes verwende:
Wenn Sie auf eine React-Komponente verweisen möchten, suchen Sie nach
Obwohl,
beschreibt alles, was gerendert werden kann - Zeichenfolgen, Zahlen, Elemente oder ein Array dieser Dinge. Wenn dies zu Ihnen passt, ist dies der richtige Weg.
quelle
Proptypes.any
ist zu häufig Typ. Eslint ist damit nicht zufrieden.Die PropTypes-Dokumentation enthält Folgendes
Sie können also
PropTypes.node
nach Objekten oder Arrays von Objekten suchenquelle
Die Antworten hier scheinen nicht ganz die genaue Überprüfung der Kinder abzudecken.
node
undobject
sind zu freizügig, ich wollte das genaue Element überprüfen. Folgendes habe ich letztendlich verwendet:oneOfType([])
diese Option, um einzelne oder mehrere untergeordnete Elemente zuzulassenshape
undarrayOf(shape({}))
für einzelne bzw. mehrere KinderoneOf
für das untergeordnete Element selbstAm Ende so etwas:
Dieses Problem hat mir geholfen, dies klarer herauszufinden: https://github.com/facebook/react/issues/2979
quelle
Wenn Sie genau einem Komponententyp entsprechen möchten, überprüfen Sie dies
Wenn Sie genau mit einigen Komponententypen übereinstimmen möchten, überprüfen Sie dies
quelle
Versuchen Sie es mit einem benutzerdefinierten PropTyp:
Geige
Code-Snippet anzeigen
quelle
Beispiel:
Bild: Zeigt einen Fehler in der Konsole an, wenn der erwartete Typ unterschiedlich ist
quelle