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

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

Answer 2

是的，该错误听起来有点令人困惑-本质上，它表示您只能在由ReactElement强制执行的函数组件定义中返回单个JSX.Element或等效的React.FC类型。

React Fragments solve此限制，因此您可以通过以下方式编写TodoList：

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((item: Todo) => (
      <div key={item.id}>{item.id}</div>
    ))}
  </>
);

顺便说一句：类组件可以通过render方法进行return multiple elements as array的访问。尽管如此，由于它们与React Hooks兼容，因此我更喜欢在各处使用函数（如果适用）。

Answer 3

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


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

然后我意识到 React 只期望它的 render 方法有一个返回值（1 个父组件）。因此我用 {{ 包裹了 children 道具1}} 由 React.Fragment 表示，解决了我的问题。以下是我的<></>组件示例，希望对其他人有所帮助。

Loading

类型'（{{items}：PropsWithChildren <TodoProps>）=>元素[]'无法分配给类型'FunctionComponent <TodoProps>'

3 个答案: