React组件返回Element[]触发TS2786错误，原因是什么？

错误信息 #

TS2786: 'Letters' cannot be used as a JSX component.
Its return type 'Element[]' is not a valid JSX element.
Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key

相关代码 #

Letters.tsx #

import React from 'react';

const Letters = () => {
    const _renderletters = ():JSX.Element[] => {
        return ["a", "b"].map((letter: string, index:number):JSX.Element => {
            return <p key={index}>{letter}</p>
        })
    }
    return _renderletters()
}

export default Letters;

UseLetters.tsx #

import React from 'react'
import Letters from "./Letters";

const UseLetters = () => {
    return <Letters /> // <- this is highlighted with the error
}

export default UseLetters;

错误原因 #

React组件要求返回值必须是单个合法的JSX元素，而你的Letters组件直接返回了一个Element[]（JSX元素数组），这不符合React的组件返回类型规范。

TypeScript严格校验了这一点：Element[]类型缺少ReactElement类型必须的type、props、key属性，所以判定它不是有效的JSX元素，进而报错Letters无法作为JSX组件使用。

你可以通过用单个容器元素包裹数组元素来解决这个问题，比如用React碎片或者<div>：

// 修改Letters组件的返回逻辑
return <>{_renderletters()}</>

内容的提问来源于stack exchange，提问作者four-eyes