TypeScript et React - type enfants?

Question

J'ai un composant fonctionnel très simple comme suit:

 import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


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

export default aux;

Et un autre composant:

 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;

Je continue à recevoir l'erreur suivante:

[ts] Le type d'élément JSX 'ReactNode' n'est pas une fonction de constructeur pour les éléments JSX. Le type 'undefined' ne peut pas être affecté au type 'ElementClass'. [2605]

Comment puis-je taper ceci correctement?

Answer 1

Seulement children: React.ReactNode

Answer 2

Pour utiliser <Aux> dans votre JSX, il doit s'agir d'une fonction qui renvoie ReactElement<any> | null . C'est la définition d'un composant de fonction .

Cependant, il est actuellement défini comme une fonction qui renvoie React.ReactNode , qui est un type beaucoup plus large. Comme le disent les typages React:

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

Assurez-vous que les types indésirables sont neutralisés en enveloppant la valeur renvoyée dans React Fragment ( <></> ):

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

Answer 3

Vous pouvez utiliser ReactChildren et ReactChild :

 import React, { ReactChildren, ReactChild } from 'react';
 
interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

Si vous avez besoin de passer des tableaux plats d'éléments:

 interface AuxProps {
  children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}

Answer 4

Vous pouvez également utiliser React.PropsWithChildren<P> .

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

Answer 5

C'est ce qui a fonctionné pour moi:

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

Edit Je recommanderais d'utiliser children: React.ReactNode place maintenant.