类型 'Element[]' 缺少类型 'Element' 中的以下属性：type、props、key

Question

我有带有 Typescript 和 React 环境的标准箭头映射 ES7 函数：

 const getItemList: Function = (groups: any[]): JSX.Element => 
  group.map((item: any, i: number) => {
    const itemCardElemProps = { handleEvents: () => {}, ...item}
    return <Item key={`${item.id}_${i}`} {...itemCardElemProps} />
  })

并得到错误：

TS2739: Type 'Element[]' is missing the following properties from type 'Element': type, props, key

版本：打字稿 3.5.3

Answer 1

您也可以始终将单个 JSX.Element 作为片段发回：

interface IOptions {
   options: string[]
}

const CardArray: React.FC<IOptions> = ({ options }) => {
   return <>{options.map(opt => opt)}</>
}

这样您就可以匹配返回的类型，并且不会影响您的标记。

Answer 2

要修复错误，有必要将函数输出的类型从 更改JSX.Element为JSX.Element[]如下所示：

 const getItemList: Function = (groups: any[]): JSX.Element[] => 
  group.map((item: any, i: number) => {
    const itemCardElemProps = { handleEvents: () => {}, ...item}
    return <Item key={`${item.id}_${i}`} {...itemCardElemProps} />
  })

Answer 3

我收到错误是因为我继承了 JSX.Element 但我使用了 .ts 文件扩展名。当我使用 .tsx 文件扩展名时，我的问题得到解决。

Answer 4

@Roman 他们一定改变了一些东西，这对我不起作用

代码：

const CardArray = (props: Items): JSX.Element[] => {
    return props.items.map((item) => <Item data={item} />);
};

export default CardArray;

错误：

JSX element type 'Element[]' is not a constructor function for JSX elements.
Type 'Element[]' is missing the following properties from type 'Element': type, props, key

编辑：没关系，我只需要将函数类型添加到函数中......如果你问我的话有点愚蠢。

什么对我有用：

JSX element type 'Element[]' is not a constructor function for JSX elements.
Type 'Element[]' is missing the following properties from type 'Element': type, props, key