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

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

Компонент <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;

Чтобы использовать <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.

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

The recommended practice is to write the props type as {children?: any}

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

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

Просто children: React.ReactNode.

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

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

Общее способ найти любой тип на собственном примере. Прелесть машинописного текста в том, что у вас есть доступ к типам все, если у вас есть правильные файлы @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;
  ...
}

Note: This process should be used to find any unknown type! All of them are there just waiting for you to find them :)

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

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

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

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

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

Тип возвращаемого значения функционального компонента ограничен 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, таких как обратный вызов Рендеринг опоры.

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

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

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

import React, { ReactChildren, ReactChild } from 'react';
 
interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

Если вам нужно передать плоские массивы элементов:

interface AuxProps {
  children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}

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

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

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

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

React Node относится к одному из следующих типов:

• Boolean (игнорируется)
• null или undefined (игнорируется)
• Number
• String
• React element (результат JSX)
• Массив любого из вышеперечисленных, возможно, вложенный

Я использую следующие

type Props = { children: React.ReactNode };

const MyComponent: React.FC<Props> = ({children}) => {
  return (
    <div>
      { children }
    </div>
  );

export default MyComponent;

Также можно использовать JSX.ElementChildrenAttribute

export default function Layout({children}: JSX.ElementChildrenAttribute) {
    return <div>
        {children}
    </div>
}

1. вы должны знать, что любой компонент реакции должен возвращает null или React.Element, но тип props.children - React.ReactNode, поэтому вам нужно использовать props.children внутри Element, чтобы babel настраивал конструктор Element.

2. Второе правило любого компонента реакции состоит в том, что первая буква имени должен должна быть заглавной, чтобы позволить реакции распознавать, что компонент не является тегом html.

так что код должен быть таким.

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

еще один совет, если вы все еще используете машинописный текст, функциональный компонент должен быть типа React.FC, как это

type Props = {
   title: string;
}

const Aux:React.FC<Props> = (props) =>
(
    <div>
        <h3>{props.title}</h3>
        { props.children }
        {/* children is exist by default in type React.FC */}
    </div>
)

import { ReactNode, FC } from 'react'

type Props = { children: ReactNode }

const App: FC<Props> = ({children}) => (<div>{children}</div>)