reactjs - 类型 '({ items }: PropsWithChildren) => Element[]' 不可分配给类型 'FunctionComponent'

Question

我正在学习 Typescript-react，但我陷入了这个错误 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 时发生错误 TodoList.tsx 内的函数文件。

任何帮助表示赞赏。干杯!

代码:

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;

Answer 1

是的，这个错误可能听起来有点令人困惑——本质上它是说你只能返回一个 ReactElement或其等效项 JSX.Element在功能组件定义中，由 React.FC 强制执行类型。
React Fragments solve这个限制，所以你可以写 TodoList in the following manner :

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>)}
  </>
);

顺便说一句:纯JS，类和函数组件都可以返回 multiple elements in an array作为渲染输出。目前，TS 有一个 type incompatibility对于函数组件中返回的数组，因此 Fragments 在这里提供了一个可行的解决方法(除了 type assertions )。