TypeScript и React - дочерний тип?

Question

У меня очень простой функциональный компонент:

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


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

export default aux;

И еще один компонент

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;

Я получаю следующую ошибку:

[ts]Тип элемента JSX 'ReactNode' не является функцией конструктора для элементов JSX.Тип «undefined» не может быть назначен типу «ElementClass».[2605]

Как правильно набрать это?

Answer 1

вы можете объявить свой компонент следующим образом:

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

Answer 2

Просто children: React.ReactNode

Answer 3

С сайта TypeScript: https://github.com/Microsoft/TypeScript/issues/6471

Рекомендуется писать тип реквизита как {children ?: any}

Это сработалодля меня.Дочерний узел может быть много разных вещей, поэтому явная типизация может пропустить регистры.

Здесь есть более длинная дискуссия по вопросу продолжения: https://github.com/Microsoft/TypeScript/issues/13618,, но любой подход все еще работает.

Answer 4

Вот что у меня сработало:

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

Answer 5

Чтобы использовать <Aux> в вашем JSX, это должна быть функция, которая возвращает ReactElement<any> | null.Это определение компонента функции .

Однако в настоящее время он определен как функция, которая возвращает React.ReactNode, что является гораздо более широким типом.Как написано в React:

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

Убедитесь, что нежелательные типы нейтрализованы, поместив возвращенное значение в фрагмент React (<></>):

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

Answer 6

У компонентов React должен быть один узел-обертка или возвращаемый массив узлов.

Ваш <Aux>...</Aux> компонент имеет два узла div и main.

.дети в компоненте div in Aux.

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

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

export default aux;