TypeScript and React - Kinder tippen?

Ich habe eine sehr einfache Funktionskomponente wie folgt:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


const aux = (props: AuxProps) => props.children;

export default aux;

Und noch eine Komponente:

import * as React from "react";

export interface LayoutProps  { 
   children: React.ReactNode
}

const layout = (props: LayoutProps) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {props.children}
        </main>
    <Aux/>
);

export default layout;

Ich erhalte immer wieder den folgenden Fehler:

[ts] Der JSX-Elementtyp 'ReactNode' ist keine Konstruktorfunktion für JSX-Elemente. Der Typ 'undefined' kann nicht dem Typ 'ElementClass' zugewiesen werden. [2605]

Wie tippe ich das richtig?

Gerade children: React.ReactNode

Um <Aux>in Ihrem JSX verwendet zu werden, muss es eine Funktion sein, die zurückgibt ReactElement<any> | null. Das ist die Definition einer Funktionskomponente .

Derzeit ist es jedoch als eine Funktion definiert, die zurückgibt React.ReactNode, was ein viel breiterer Typ ist. Wie React-Eingaben sagen:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Stellen Sie sicher, dass die unerwünschten Typen neutralisiert werden, indem Sie den zurückgegebenen Wert in React Fragment ( <></>) einschließen :

const aux: React.FC<AuxProps> = props =>
  <>{props.children}</>;

Das hat bei mir funktioniert:

interface Props {
  children: JSX.Element[] | JSX.Element
}

Bearbeiten Ich würde empfehlen, children: React.ReactNodestattdessen jetzt zu verwenden.

Sie können Ihre Komponente folgendermaßen deklarieren:

const MyComponent: React.FunctionComponent = (props) => {
    return props.children;
}

Sie können verwenden ReactChildrenund ReactChild:

import React, { ReactChildren, ReactChild } from 'react';

interface AuxProps {
  children: ReactChild | ReactChildren;
}

const Aux = ({ children }: AuxProps) => (<div>{children}</div>);

export default Aux;

Von der TypeScript-Site: https://github.com/Microsoft/TypeScript/issues/6471

Die empfohlene Vorgehensweise besteht darin, den Requisitentyp als {Kinder?: Beliebig} zu schreiben.

Das hat bei mir funktioniert. Der untergeordnete Knoten kann viele verschiedene Dinge sein, so dass bei der expliziten Eingabe Fälle übersehen werden können.

Es gibt hier eine längere Diskussion zum Folgeproblem: https://github.com/Microsoft/TypeScript/issues/13618 , aber jeder Ansatz funktioniert immer noch.

Der Rückgabetyp der Funktionskomponente ist JSXElement | nullin TypeScript beschränkt. Dies ist eine aktuelle Typbeschränkung. Pure React ermöglicht mehr Rückgabetypen.

Minimaler Demonstrationsausschnitt

Sie können entweder eine Typzusicherung oder Fragmente als Problemumgehung verwenden:

const Aux = (props: AuxProps) => <>props.children</>; 
const Aux2 = (props: AuxProps) => props.children as ReactElement; 

ReactNode

children: React.ReactNodekönnte suboptimal sein, wenn das Ziel darin besteht, starke Typen für zu haben Aux.

Dem aktuellen ReactNodeTyp kann fast alles zugeordnet werden , was äquivalent zu ist {} | undefined | null. Ein sicherer Typ für Ihren Fall könnte sein:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

Beispiel:

Gegebene AuxBedürfnisse Reagieren Sie Elemente als children, wir haben versehentlich ein hinzugefügt string. Dann würde die obige Lösung im Gegensatz zu ReactNode- werfen Sie einen Blick auf die verknüpften Spielplätze.

Typisiert childrensind auch nützlich für Nicht-JSX-Requisiten wie einen Render Prop- Rückruf.

Sie können auch verwenden React.PropsWithChildren<P>.

type ComponentWithChildProps = React.PropsWithChildren<{example?: string}>;

Der allgemeine Weg, einen Typ zu finden, ist beispielhaft. Das Schöne an Typoskript ist, dass Sie Zugriff auf alle Typen haben, solange Sie über die richtigen @types/Dateien verfügen .

Um dies selbst zu beantworten, dachte ich nur an eine Komponente, die die childrenRequisite verwendet. Das erste, was mir in den Sinn kam? Wie wäre es mit einem <div />?

Alles was Sie tun müssen, ist vscode zu öffnen und eine neue .tsxDatei in einem Reaktionsprojekt mit zu erstellen @types/react.

import React from 'react';

export default () => (
  <div children={'test'} />
);

Wenn childrenSie mit der Maus über die Requisite fahren, sehen Sie den Typ. Und was weißt du - sein Typ ist ReactNode(keine Notwendigkeit für ReactNode[]).

Dann , wenn Sie die Typdefinition klicken hinein bringt Sie direkt in die Definition des Begriffs childrenkommen DOMAttributesSchnittstelle.

// node_modules/@types/react/index.d.ts
interface DOMAttributes<T> {
  children?: ReactNode;
  ...
}

Hinweis: Dieser Prozess sollte verwendet werden, um einen unbekannten Typ zu finden! Alle warten nur darauf, dass du sie findest :)

Als Typ, der Kinder enthält, verwende ich:

type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">

Dieser untergeordnete Containertyp ist generisch genug, um alle verschiedenen Fälle zu unterstützen, und auch an der ReactJS-API ausgerichtet.

Für Ihr Beispiel wäre es also ungefähr so:

const layout = ({ children }: ChildrenContainer) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {children}
        </main>
    <Aux/>
)

Diese Antworten scheinen veraltet zu sein - React verfügt jetzt über einen integrierten Typ PropsWithChildren<{}>. Es ist ähnlich wie einige der richtigen Antworten auf dieser Seite definiert:

type PropsWithChildren<P> = P & { children?: ReactNode };

Reaktionskomponenten sollten einen einzelnen Wrapper-Knoten haben oder ein Array von Knoten zurückgeben.

Ihre <Aux>...</Aux>Komponente hat zwei Knoten divund main.

Versuchen Sie, Ihre Kinder in eine divIn- AuxKomponente zu wickeln .

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

const aux = (props: AuxProps) => (<div>{props.children}</div>);

export default aux;