web-dev-qa-db-fra.com

TypeScript et React - le type des enfants?

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 à obtenir l'erreur suivante:

[ts] Le type d'élément JSX 'ReactNode' n'est pas une fonction constructeur pour les éléments JSX . Le type 'non défini' n'est pas assignable au type 'ElementClass'. [2605]

Comment est-ce que je tape ceci correctement?

reactjstypescriptjsxtypescript2.0
2
Asool

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 function .

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

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

Assurez-vous que les types indésirables sont neutralisés en encapsulant la valeur renvoyée dans le fragment réactif (<></>):

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

C'est ce qui a fonctionné pour moi:

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