TypeScript i React - dzieci piszą?

Mam bardzo prosty element funkcjonalny, jak następuje:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


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

export default aux;

I kolejny komponent:

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;

Ciągle otrzymuję następujący błąd:

[ts] Typ elementu JSX „ReactNode” nie jest funkcją konstruktora dla elementów JSX. Typu „undefined” nie można przypisać do typu „ElementClass”. [2605]

Jak mam to poprawnie wpisać?

Właśnie children: React.ReactNode

Aby użyć go <Aux>w JSX, musi to być funkcja, która zwraca ReactElement<any> | null. To jest definicja składnika funkcji .

Jednak obecnie jest zdefiniowana jako funkcja zwracająca React.ReactNode, która jest typem znacznie szerszym. Jak mówią typy React:

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

Upewnij się, że niechciane typy są zneutralizowane, opakowując zwracaną wartość w React Fragment ( <></>):

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

Oto, co zadziałało dla mnie:

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

Edytuj Polecam używać children: React.ReactNodezamiast tego teraz.

możesz zadeklarować swój komponent w ten sposób:

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

Możesz użyć ReactChildreni ReactChild:

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

interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

Z witryny TypeScript: https://github.com/Microsoft/TypeScript/issues/6471

Zalecaną praktyką jest zapisanie typu rekwizytów jako {dzieci ?: any}

To zadziałało dla mnie. Węzeł potomny może mieć wiele różnych cech, więc jawne wpisywanie może pomijać przypadki.

Dłuższa dyskusja na temat następującego problemu jest tutaj: https://github.com/Microsoft/TypeScript/issues/13618 , ale każde podejście nadal działa.

Typ zwracany składnika funkcji jest ograniczony do JSXElement | nullw TypeScript. Jest to aktualne ograniczenie typu, czysty React pozwala na więcej typów zwracanych.

Minimalny fragment demonstracyjny

Możesz użyć asercji typu lub fragmentów jako obejścia:

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

ReactNode

children: React.ReactNode może być nieoptymalny, jeśli celem jest posiadanie silnych typów Aux .

Prawie wszystko można przypisać do bieżącego ReactNodetypu, co jest równoważne {} | undefined | null. Bezpieczniejszym typem dla Twojego przypadku może być:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

Przykład:

Biorąc pod uwagę Auxpotrzeby elementy React as children, przypadkowo dodaliśmy stringdo niego a. Wtedy powyższe rozwiązanie byłoby błędem w przeciwieństwie doReactNode - spójrz na połączone place zabaw.

Typy childrensą również przydatne w przypadku właściwości innych niż JSX, takich jak wywołanie zwrotne właściwości renderowania .

Możesz także użyć React.PropsWithChildren<P>.

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

Ogólny sposób znaleźć każdy rodzaj jest dobry przykład. Piękno maszynopisu polega na tym, że masz dostęp do wszystkich typów, o ile masz poprawną@types/ pliki.

Aby odpowiedzieć sobie na to pytanie, pomyślałem, że komponent reaguje, który ma właściwości children. Pierwsza rzecz, która przyszła mi do głowy? Co powiesz na<div /> ?

Wszystko, co musisz zrobić, to otworzyć vscode i utworzyć nowy .tsxplik w projekcie React z @types/react.

import React from 'react';

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

Najechanie kursorem na childrenrekwizyt pokazuje typ. A co wiesz - jego typ jest ReactNode(nie ma potrzeby ReactNode[]).

Następnie, jeśli klikniesz na definicję typu, przejdziesz bezpośrednio do definicji childrenpochodzącej z DOMAttributesinterfejsu.

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

Uwaga: ten proces powinien być używany do znalezienia nieznanego typu! Wszystkie czekają, aż je znajdziesz :)

Jako typ zawierający dzieci używam:

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

Ten typ kontenera podrzędnego jest wystarczająco ogólny, aby obsługiwać wszystkie różne przypadki, a także dostosowany do interfejsu API ReactJS.

Na przykład będzie to coś takiego:

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

Te odpowiedzi wydają się być nieaktualne - React ma teraz wbudowany typ PropsWithChildren<{}>. Jest definiowany podobnie do niektórych poprawnych odpowiedzi na tej stronie:

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

Komponenty React powinny mieć pojedynczy węzeł opakowujący lub zwracać tablicę węzłów.

Twój <Aux>...</Aux>komponent ma dwa węzły divimain .

Spróbuj owinąć swoje dzieci divw Auxkomponent.

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

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

export default aux;