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

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

Link 代码：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;

Answer 1

是的，这个错误可能听起来有点令人困惑 - 本质上它说你只能 return 一个单一的 ReactElement 或其等效的 JSX.Element 在功能组件定义中，强制执行按 React.FC 类型。

React Fragments solve this limitation, so you can write 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，class和函数组件都可以return multiple elements in an array as render output. Currently, TS has a type incompatibility for returned arrays in function components, so Fragments provide a viable workaround here (in addition to type assertions).

Answer 2

我遇到过类似的错误。最终我注意到在使用 TypeScript 将组件转换为 FunctionComponent 时，我错误地将文件从 .js 重命名为 .ts 而不是 .tsx。

Answer 3

当我尝试从我的 Loading 组件中 return children 道具时，我也遇到了这个错误，如下所示。


    const { loading, children } = props;
    return loading ? <p>Loading ... </p> : children;

然后我意识到 React 只期望来自它的 render 方法的一个 return 值（1 个父组件）。 因此我包装了 children 带有 React.Fragment 的道具，用 <></> 表示，这解决了我的问题。下面是我的 Loading 组件示例，希望对其他人有所帮助。

import { FunctionComponent } from "react";

interface ILoadingProps {
  loading: boolean;
}
export const Loading: FunctionComponent<ILoadingProps> = (props) => {
  const { loading, children } = props;
  return loading ? <p>Loading ... </p> : <>{children}</>;
};

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

Type '({ items }: PropsWithChildren<TodoProps>) => Element[]' is not assignable to type 'FunctionComponent<TodoProps>'

typescript

reactjs

react-typescript