TypeScript e React - tipo filho?

Eu tenho um componente funcional muito simples como segue:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


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

export default aux;

E outro 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;

Continuo recebendo o seguinte erro:

[ts] Tipo de elemento JSX 'ReactNode' não é uma função de construtor para elementos JSX. O tipo 'undefined' não pode ser atribuído ao tipo 'ElementClass'. [2605]

Como faço para digitar isso corretamente?

Somente children: React.ReactNode

Para usar <Aux>em seu JSX, ele precisa ser uma função que retorna ReactElement<any> | null. Essa é a definição de um componente de função .

No entanto, atualmente é definido como uma função que retorna React.ReactNode, que é um tipo muito mais amplo. As tipificações React dizem:

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

Certifique-se de que os tipos indesejados sejam neutralizados envolvendo o valor retornado em React Fragment ( <></>):

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

Isto é o que funcionou para mim:

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

Editar Eu recomendaria usar children: React.ReactNodeagora.

você pode declarar seu componente assim:

const MyComponent: React.FunctionComponent = (props) => {
    return props.children;
}

Você pode usar ReactChildrene ReactChild:

import React, { ReactChildren, ReactChild } from 'react';

interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

Do site TypeScript: https://github.com/Microsoft/TypeScript/issues/6471

A prática recomendada é escrever o tipo de adereços como {crianças ?: qualquer}

Isso funcionou para mim. O nó filho pode ser muitas coisas diferentes, então a digitação explícita pode perder casos.

Há uma discussão mais longa sobre o problema de acompanhamento aqui: https://github.com/Microsoft/TypeScript/issues/13618 , mas qualquer abordagem ainda funciona.

O tipo de retorno do componente de função é limitado JSXElement | nullem TypeScript. Esta é uma limitação de tipo atual, o React puro permite mais tipos de retorno.

Trecho mínimo de demonstração

Você pode usar uma declaração de tipo ou fragmentos como solução alternativa:

const Aux = (props: AuxProps) => <>props.children</>; 
const Aux2 = (props: AuxProps) => props.children as ReactElement; 

ReactNode

children: React.ReactNodepode ser inferior ao ideal, se o objetivo for ter tipos fortes para Aux.

Quase tudo pode ser atribuído ao ReactNodetipo atual , que é equivalente a {} | undefined | null. Um tipo mais seguro para o seu caso poderia ser:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

Exemplo:

Dadas Auxnecessidades React elementos como children, acidentalmente adicionamos a stringa ele. Então, a solução acima seria um erro em contraste com ReactNode- dê uma olhada nos playgrounds vinculados.

Digitados childrentambém são úteis para adereços não JSX, como um retorno de chamada Render Prop .

Você também pode usar React.PropsWithChildren<P>.

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

A maneira geral de encontrar qualquer tipo é por exemplo. A beleza do texto datilografado é que você tem acesso a todos os tipos, desde que tenha os @types/arquivos corretos .

Para responder a isso eu mesmo pensei em um componente reage usa que tem o childrenprop. A primeira coisa que me veio à cabeça? Que tal um <div />?

Tudo que você precisa fazer é abrir o vscode e criar um novo .tsxarquivo em um projeto react com @types/react.

import React from 'react';

export default () => (
  <div children={'test'} />
);

Passar o mouse sobre o childrenadereço mostra o tipo. E o que você sabe - Seu tipo é ReactNode(não há necessidade de ReactNode[]).

Então, se você clicar na definição de tipo, será direcionado diretamente para a definição de childrenvir da DOMAttributesinterface.

// node_modules/@types/react/index.d.ts
interface DOMAttributes<T> {
  children?: ReactNode;
  ...
}

Nota: Este processo deve ser usado para encontrar qualquer tipo desconhecido! Todos eles estão lá apenas esperando que você os encontre :)

Como um tipo que contém filhos, estou usando:

type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">

Este tipo de contêiner filho é genérico o suficiente para suportar todos os casos diferentes e também está alinhado com a API ReactJS.

Então, para o seu exemplo, seria algo como:

const layout = ({ children }: ChildrenContainer) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {children}
        </main>
    <Aux/>
)

Essas respostas parecem estar desatualizadas - o React agora tem um tipo integrado PropsWithChildren<{}>. É definido de forma semelhante a algumas das respostas corretas nesta página:

type PropsWithChildren<P> = P & { children?: ReactNode };

Os componentes React devem ter um único nó wrapper ou retornar uma matriz de nós.

Seu <Aux>...</Aux>componente possui dois nós dive main.

Tente envolver seus filhos em um divno Auxcomponente.

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

const aux = (props: AuxProps) => (<div>{props.children}</div>);

export default aux;