TypeScript и React - детский тип?

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

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]

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

Просто children: React.ReactNode

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

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

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

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

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

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

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

Изменить Я бы рекомендовал использовать children: React.ReactNodeвместо этого сейчас.

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

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

Вы можете использовать ReactChildrenи ReactChild:

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

interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

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

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

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

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

Тип возвращаемого значения функционального компонента ограничен JSXElement | nullв TypeScript. Это текущее ограничение типа, чистый React допускает больше типов возвращаемых значений.

Минимальный демонстрационный фрагмент

В качестве временного решения можно использовать утверждение типа или фрагменты:

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

ReactNode

children: React.ReactNodeможет быть неоптимальным, если цель состоит в том, чтобы иметь сильные типы для Aux.

Текущему ReactNodeтипу можно присвоить почти все , что эквивалентно {} | undefined | null. Более безопасным вариантом для вашего случая может быть:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

Пример:

Учитывая Auxпотребности в элементах React as children, мы случайно добавили stringк нему. Тогда приведенное выше решение будет ошибкой, в отличие от ReactNode- взгляните на связанные игровые площадки.

Типизированные childrenтакже полезны для свойств, отличных от JSX, например для обратного вызова Render Prop .

Вы также можете использовать React.PropsWithChildren<P>.

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

Общий способ найти любой тип на примере. Прелесть машинописного текста в том, что у вас есть доступ ко всем типам, если у вас есть правильные @types/файлы.

Чтобы ответить на этот вопрос, я просто подумал о том, что компонент React использует эту childrenопору. Первое, что пришло в голову? А как насчет <div />?

Все, что вам нужно сделать, это открыть vscode и создать новый .tsxфайл в проекте реакции с помощью @types/react.

import React from 'react';

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

При наведении курсора на childrenопору отображается тип. А что вы знаете - его тип ReactNode(не нужен ReactNode[]).

Затем, если вы щелкните определение типа, вы сразу перейдете к определению childrenисходящего из DOMAttributesинтерфейса.

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

Примечание: этот процесс следует использовать для поиска любого неизвестного типа! Все они ждут, пока вы их найдете :)

В качестве типа, содержащего детей, я использую:

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

Этот тип дочернего контейнера достаточно универсален, чтобы поддерживать все различные случаи, а также согласован с API ReactJS.

Итак, для вашего примера это будет примерно так:

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

Эти ответы кажутся устаревшими - React теперь имеет встроенный тип PropsWithChildren<{}>. Он определяется аналогично некоторым правильным ответам на этой странице:

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

У меня всегда работало:

type Props = {
  children: JSX.Element;
};

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

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

Попробуйте заключить своих детей divв Auxкомпонент in .

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

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

export default aux;