Проблема с React children?

Question

[Orion Orion]

хотел обернуть реакт компонент, но почему-то данная ошибка

Comments

[Aetae]

Мужик, тебе же снова удалят вопрос, может таки стоило почитать правила на которые при удалении ссылался модератор? Например то что код должен быть текстом, а не картинкой?

Answer 1

[Aetae]

Делая так:
const ThemeProvider: FC = ...;
Ты говоришь ts, что у тебя ThemeProvider имеет тип FC, и пофиг что ты там дальше пишешь. Тип FC по умолчанию не имеет children.

Пиши либо так:
const ThemeProvider: FC<{children: ...}> = ...;

Либо так:
const ThemeProvider = ({ children }: ...) => ...;
* Кстати обрати внимание на деструктуризацию, в react component всегда приходят props, children это поле props, а не верхний аргумент.

Либо так:
const ThemeProvider: FC<PropsWithChildren> = ...
* PropsWithChildren - тип помощник, добавляющий children к объекту, например

PropsWithChildren<{
 prop2: string; 
 prop3: number
}>

но без дженерика просто отдаёт тип вида

{
    children?: ReactNode | undefined;
}

Comments

[Orion Orion]

[Orion Orion]

This JSX tag's 'children' prop expects a single child of type 'ReactElement>', but multiple children were provided.

[Aetae]

Orion Orion, тебе не надо было самому делать PropsWithChildren, а надо было использовать те, что экспортирует React точно также как FC.

И даже если ты захотел зачем-то обязательно сделать это руками, то тебе следовало взять код из моего ответа, а не из своей головы(хотя желлание написать самому и разобраться - похвально). ReactNode и ReactElement - разные вещи: ReactNode включает в себя и ReactElement, и string, и null, и рекурсивно массив из самой себя(на самом деле Iterable, но не суть) и ещё ряд редких вещей.

Твой же тип, соответственно, ждёт в children один и только один ReactElement, о чём тебе и пишет ошибка.

...
Ты спросишь: но я же и передаю один!? После чего я гляну на твой код ещё раз, увижу запятые и сделаю facepalm. Запятые - не часть ситаксиса JSX, потому в данном случае это просто текстовые элементы. Т.е. в ThemeProvider у тебя летит на самом деле два children'а: App и ",".