类型“ Element []”缺少类型“ Element”中的以下属性：类型，道具，钥匙

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

@罗马他们一定已经改变了某些东西，这对我不起作用

代码：

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

edit：没关系，我只需要在函数中添加函数类型... 如果你问我，那有点愚蠢。

什么对我有效：

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

Answer 4

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