reactjs - Typ '({ items }: PropsWithChildren) => Element[]' nie je priraditeľný k typu 'FunctionComponent'

Učím sa Typescript-react a zasekol som sa na tejto chybe Type '({ items }: PropsWithChildren<TodoProps>) => Element[]' is not assignable to type 'FunctionComponent<TodoProps>' a som z toho stratený.

Úplná chyba:

Type '({ items }: PropsWithChildren<TodoProps>) => Element[]' is not assignable to type 'FunctionComponent<TodoProps>'.
  Type 'Element[]' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>': type, props, key

Odkaz na kód: sandbox repozitár.

Chyba sa vyskytuje pri deklarácii funkcie TodoList v súbore TodoList.tsx.

Každá pomoc je vítaná. Na zdravie!

Kód :

import React from "react";

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

interface TodoProps {
  items: Todo[];
}

//    v------v here is error
const TodoList: React.FC<TodoProps> = ({ items }) => {
  return items.map((item: Todo) => <div key={item.id}>{item.id}</div>);
};

export default TodoList;

Odpoveď č. 1

Áno, táto chyba môže znieť trochu mätúco - v podstate hovorí, že vo funkčnej komponente môžete vrátiť iba jeden ReactElement alebo jeho ekvivalent JSX.Element, čo je vynútené typom React.FC.

React fragmenty riešia toto obmedzenie, takže môžete napísať TodoList nasledujúcim spôsobom:

interface TodoProps {
  items: Todo[];
}

const TodoList: React.FC<TodoProps> = ({ items }) => (
  <React.Fragment>
    {items.map((item: Todo) => (
      <div key={item.id}>{item.id}</div>
    ))}
  </React.Fragment>
);

const TodoList: React.FC<TodoProps> = ({ items }) => (
  <>
    {items.map(({ id }) => <div key={id}>{id}</div>)}
  </>
);

Mimochodom: S čistým JS môžu triedy aj funkčné komponenty vracať viacero prvkov v poli ako výstup renderovania. V súčasnosti má TS typovú nekompatibilitu pre vracané polia vo funkčných komponentoch, takže Fragmenty tu poskytujú životaschopné riešenie (okrem typových tvrdení).

Odpoveď č. 2

Stretol som sa s podobnou chybou. Nakoniec som si všimol, že som súbor nesprávne premenoval z .js na .ts namiesto na .tsx, keď som komponent prevádzal na FunctionComponent s TypeScriptom.

Súvisiace články