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?
Solo children: React.ReactNode .
Para usar <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 tipos de React:
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined; Asegúrese de que los tipos no deseados se neutralicen envolviendo el valor devuelto en React Fragment ( <></> ):
const aux: React.FC<AuxProps> = props => <>{props.children}</>;Puedes usar ReactChildren y ReactChild :
import React, { ReactChildren, ReactChild } from 'react'; interface AuxProps { children: ReactChild | ReactChildren; } const Aux = ({ children }: AuxProps) => (<div>{children}</div>); export default Aux;Si necesita pasar matrices planas de elementos:
interface AuxProps { children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[]; }