‘App‘ cannot be used as a JSX component. Its return type ‘Element[]‘ is not a valid JSX element.

最新推荐文章于 2024-03-06 10:00:00 发布

袖子味

最新推荐文章于 2024-03-06 10:00:00 发布

阅读量8.4k

点赞数 1

分类专栏：前端文章标签： react.js 前端 typescript

本文链接：https://blog.youkuaiyun.com/weixin_44401906/article/details/121042424

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在使用TypeScript开发React应用时，遇到的函数组件返回类型错误，并提供了两种解决方案：一是将返回值设为any类型，二是明确定义为JSX.Element。通过实例演示了如何修正代码并确保正确渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录最近在用ts写react遇到的一个问题：
代码如下：

function App() {
  const nameArray:string[] = ['Bob','Jack','Mary'];
  return(
  nameArray.map((name:string)=>{    
    return(
      <div>{name}</div>
    )
  })
  )
 }

然后报错：
‘App’ cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element.
在这里插入图片描述

解决办法1：把函数组件App的返回值设置为any类型即可解决。

function App():any {
  const nameArray:string[] = ['Bob','Jack','Mary'];
  return(
  nameArray.map((name:string)=>{    
    return(
      <div>{name}</div>
    )
  })
  )
 }
 export default App;

解决办法2：把函数组件App的返回值改写成JSX元素类型的。
代码如下：

function App():JSX.Element {
  const nameArray:string[] = ['Bob','Jack','Mary'];
  return(
    <div>
    {
      nameArray.map((name:string)=>{
        return(
          <div>{name}</div>
        )
      })
    } 
    </div>
  )
}
export default App;