¿Cuál es el tipo de accesorio 'niños'?

Tengo un componente funcional muy simple de la siguiente manera:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


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

export default aux;

Y otro componente:

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;

Sigo recibiendo el siguiente error:

[ts] El tipo de elemento JSX 'ReactNode' no es una función constructora para elementos JSX. El tipo 'indefinido' no se puede asignar al tipo 'ElementClass'. [2605]

¿Cómo escribo esto correctamente?

Dec 09 '18 09:12 Asool

Para poder usarlo <Aux>en su JSX, debe ser una función que devuelva ReactElement<any> | null. Esa es la definición de un componente de función .

Sin embargo, actualmente se define como una función que devuelve React.ReactNode, que es un tipo mucho más amplio. Como dicen los mecanografiados de React:

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

Asegúrese de que los tipos no deseados estén neutralizados envolviendo el valor devuelto en React Fragment ( <></>):

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

Dec 09 '2018 03:12 Karol Majewski

También puedes usar React.PropsWithChildren<P>.

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

Jun 23 '2020 11:06 Sibren