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/isissue/6471

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

Це працювало для мене. У дочірньому вузлі може бути багато різних речей, тому чітке введення тексту може пропускати випадки.

Продовження дискусії щодо подальшої проблеми тут: https://github.com/Microsoft/TypeScript/isissue/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 children, ми випадково додали stringїх. Тоді вище рішення буде помилкою на відміну від ReactNode- подивіться на пов’язані майданчики.

Введені childrenтакож корисні для реквізитів, що не є JSX, як зворотний виклик Render Prop .

Ви також можете використовувати React.PropsWithChildren<P>.

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

Загальний спосіб знайти будь-який тип на прикладі. Краса машинопису полягає в тому, що у вас є доступ до всіх типів, якщо у вас є правильні @types/файли.

Щоб відповісти на це сам, я просто подумав про використання компонентів, які реагують на 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 };

Компоненти реагування повинні мати один вузол обгортки або повертати масив вузлів.

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

Спробуйте загорнути своїх дітей divу Auxскладові.

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

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

export default aux;