React / TypeScript : quel est le type enfant (children type) ?

Le framework JavaScript fonctionne avec un système de composants. On peut créer des composants de deux manières : avec une classe ou bien des fonctions. On parle dans le deuxième cas de composants fonctionnels. Ces composants peuvent contenir des éléments HTML ou bien d'autres composants. C'est avec ce système d'arborescence, qui part du composant principal (l'application), que l'on crée son application web.

Pour définir un composant enfant, on utilise l'attribut "Children" ou "Child", selon le nombre d'enfants que l'on souhaite définir (plusieurs ou un seul). Lorsque l'on définit notamment l'interface qui compose le composant fonctionnel, on doit définir le type de composant qui est contenu. Si vous définissez le mauvais type, vous pouvez générer un message d'erreur lors de la construction de votre application. Vous pouvez par exemple obtenir le message d'erreur "JSX element type 'ReactNode' is not a constructor function for JSX elements". Si votre composant enfant est un composant fonctionnel que vous avez développé, nous vous conseillons d'utiliser le type "React.ReactNode". Ce type est l'un des types les plus larges utilisés par le framework et englobe notamment un composant pas encore créé (null) ou bien un composant créé par vous.

//Premier composant
import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }

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

export default aux;

//Deuxième 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;

JavaScript