Wie Verwenden von Kindern mit Stateless Functional Component in TypeScript reagieren?

Question

Mit Typoskript mit Reagieren wir nicht mehr React.Props, um für den Compiler verlängern müssen zu wissen, dass alle Komponenten Requisiten reagieren Kinder haben:

interface MyProps { } 

class MyComponent extends React.Component<MyProps, {}> { 
    public render(): JSX.Element { 
    return <div>{this.props.children}</div>; 
    } 
} 

aber es scheint nicht der Fall für staatenlos funktionsfähig zu sein Komponenten:

const MyStatelessComponent = (props: MyProps) => { 
    return (
    <div>{props.children}</div> 
); 
}; 

Strahlt die Compiler-Fehler:

Error:(102, 17) TS2339: Property 'children' does not exist on type 'MyProps'.

ich denke, das ist becau Se gibt es wirklich keine Möglichkeit für den Compiler zu wissen, dass eine Vanilla-Funktion children im Props-Argument gegeben wird.

Die Frage ist also, wie sollten wir Kinder in einer zustandslosen funktionalen Komponente in TypeScript verwenden?

Ich könnte auf die alte Art und Weise von MyProps extends React.Props zurückgehen, aber die Props Schnittstelle ist marked as deprecated und staatenlos Komponenten haben oder unterstützen keinen Props.ref wie ich es verstehe.

So konnte ich die children prop manuell definieren:

interface MyProps { 
    children?: React.ReactNode; 
} 

Erstens: ist ReactNode der richtige Typ?

Zweitens: Ich habe Kinder als optional (?) schreiben, sonst werden die Verbraucher denken, dass children soll ein Attribut der Komponente (<MyStatelessComponent children={} />) sein, und einen Fehler auslösen, wenn nicht mit einem Wert versehen.

Es scheint, als ob ich etwas vermisse. Kann jemand Klarheit darüber geben, ob mein letztes Beispiel die Möglichkeit ist, in React zustandslose funktionale Komponenten mit Kindern zu verwenden?

Answer 1

Vorerst können Sie die React.StatelessComponent<> Typ verwenden, wie:

const MyStatelessComponent : React.StatelessComponent<{}> = props => 
    <div>{props.children}</div> 

Was ich hinzugefügt haben, wird die Rückgabetyp der Komponente React.StatelessComponent Typ eingestellt werden.

Für eine Komponente mit Ihrem eigenen Requisiten (wie MyProps Schnittstelle):

const MyStatelessComponent : React.StatelessComponent<MyProps> = props => 
    <div> 
     <p>{props.propInMyProps}</p> 
     <p>{props.children}</p> 
    </div> 

Nun props die children Eigenschaft als auch solche aus MyProps Schnittstelle erhalten hat.

Ich habe dies in Typoskript Version 2.0.7

Zusätzlich Sie React.SFC statt React.StatelessComponent der Kürze halber verwenden können.