web-dev-qa-db-ja.com

type '（{アイテム}：PropSwithChildren <Todoprops>）=>要素[]'は 'functionComponent <todoprops>'の型に割り当てられません。

私はTypeScript-Rectを学んでいて、私はこのエラーで立ち往生していますType '({ items }: PropsWithChildren<TodoProps>) => Element[]' is not assignable to type 'FunctionComponent<TodoProps>'と私はこれで失われています。

完全なエラー：

_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
_

コードのためのリンク: Sandbox Repo 。

_TodoList.tsx_ファイル内のTodoList関数の宣言でエラーが発生します。

あらゆる助けが高く評価されています。乾杯！

コード：

_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;

_
reactjstypescriptreact-typescript
10
homosaurus

私は同様のエラーが発生しました。 ComponentをTypeScriptでFunctionComponentに変換するときに、.tsxから.tsから.tsの代わりに.tsから.tsへの名前を.tsxに変更したことに気付きました。

4
Alistair Cooper