React报错之组件不能作为JSX组件使用的解决方法.docxVIP

第

React报错之组件不能作为JSX组件使用的解决方法

目录总览返回单个JSX元素不要忘记返回值更新React类型声明

总览

组件不能作为JSX组件使用，出现该错误有多个原因：

返回JSX元素数组，而不是单个元素。从组件中返回JSX元素或者null以外的任何值。使用过时的React类型声明。

返回单个JSX元素

下面是一个错误如何发生的示例。

//App.tsx

//??AppcannotbeusedasaJSXcomponent.

//ItsreturntypeElement[]isnotavalidJSXelement.

//TypeElement[]ismissingthefollowingpropertiesfromtypeReactElementany,any:type,props,key

constApp=()={

return[a,b,c].map(element={

returnh2key={element}{element}/h2

exportdefaultApp;

代码示例中的问题是，我们返回的是一个JSX元素数组，而不是单个JSX元素。

为了解决这种情况下的错误，我们必须使用Reactfrag