Wenn wir TypeScript mit React verwenden, müssen wir React.Props nicht länger verlängern, damit der Compiler weiß, dass alle reaktiven Komponentenrequisiten Kinder haben können:
Bei zustandslosen funktionalen Komponenten scheint dies jedoch nicht der Fall zu sein:
%Vor%Gibt den Kompilierungsfehler aus:
Fehler: (102, 17) TS2339: Die Eigenschaft 'children' existiert nicht für den Typ "MyProps".
Ich schätze, das liegt daran, dass der Compiler wirklich nicht wissen kann, dass eine Vanilla-Funktion children im Props-Argument erhalten wird.
Die Frage ist also, wie sollten wir Kinder in einer statusfreien funktionalen Komponente in TypeScript verwenden?
Ich könnte zum alten Weg von MyProps extends React.Props zurückkehren, aber die Props Schnittstelle ist als veraltet markiert , und zustandslose Komponenten haben oder unterstützen kein Props.ref , wie ich es verstehe.
Also könnte ich die children Requisite manuell definieren:
Erstens: Ist ReactNode der richtige Typ?
Zweitens: Ich muss Kinder als optional ( ? ) schreiben, sonst meinen die Verbraucher, dass children ein Attribut der Komponente ( <MyStatelessComponent children={} /> ) sein soll, und erhöhen ein Fehler, wenn kein Wert angegeben wird.
Es scheint, als ob ich etwas verpasse. Kann jemand Klarheit darüber geben, ob mein letztes Beispiel die Möglichkeit ist, zustandslose funktionale Komponenten mit Kindern in React zu verwenden?
Vorerst können Sie den React.StatelessComponent<> -Typ wie folgt verwenden:
Was ich dort hinzugefügt habe, ist, den Rückgabetyp der Komponente auf React.StatelessComponent type zu setzen.
Für eine Komponente mit eigenen benutzerdefinierten Requisiten (wie MyProps interface):
Nun hat props die Eigenschaft children sowie die von MyProps interface.
Ich habe dies in der Typoskript-Version 2.0.7 überprüft.
Zusätzlich können Sie React.SFC anstelle von React.StatelessComponent für die Kürze verwenden.
Tags und Links typescript reactjs