本文详解React中“组件不能作为JSX组件使用”报错的常见原因，包括返回数组、返回undefined或null以及类型声明过时。通过示例展示如何使用React Fragment或div包裹数组，修正自动分号插入导致的undefined返回，并更新@types/react以解决类型错误。
总览
当React提示组件不能作为JSX组件使用时，通常由以下几种情况引发：
- 组件返回了JSX元素数组，而非单个根元素。
- 组件返回了
null或等非JSX值，或者忘记返回值。 - 项目中的React类型声明版本过旧，导致类型检查误报。
返回单个JSX元素
以下代码展示了错误发生的具体场景。
// App.tsx
// ⛔️ 'App' 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
const App = () => {
return ['a', 'b', 'c'].map(element => {
return <h2 key={element}>{element}</h2>;
});
};
export default App;
示例中的存在一个问题：组件直接返回了一个JSX元素数组，而不是单个根节点。
要修复此问题，可以使用React fragment（即div）将数组包裹起来，使其成为单个根元素。
// App.tsx
const App = () => {
return (
<>
{['a', 'b', 'c'].map(element => {
return <h2 key={element}>{element}</h2>;
})}
</>
);
};
export default App;
修改后，组件返回单个JSX元素，错误随之解决。
Fragments允许我们将子节点列表分组，而无需在DOM中添加额外的包装节点。
此外，您可能还会遇到更详细的fragments语法形式。
// App.tsx
import React from 'react';
const App = () => {
return (
<React.Fragment>
{['a', 'b', 'c'].map(element => {
return <h2 key={element}>{element}</h2>;
})}
</React.Fragment>
);
};
export default App;
当然，也可以使用普通的div元素作为包裹器，确保组件返回单个JSX元素。
确保返回值有效
另一个常见原因是，组件返回了JSX元素、或null以外的值，或者完全忘记返回值。
// ⛔️ 'App' cannot be used as a JSX component.
// Its return type 'undefined' is not a valid JSX element.
const App = () => {
// 👇️ this returns undefined
return
<h2>hello world</h2>
};
export default App;
上述示例中，组件返回了undefined。这是因为return语句与JSX代码分写两行且未加括号，JavaScript的自动分号插入机制（ASI）在return后插入了分号。
由于组件返回了
undefined，React无法将其渲染为JSX元素，从而报错。
修复方法是确保return语句后的代码是可达的，通常通过添加括号或换行符来实现。
const App = () => {
return (
<div>
<h2>hello world</h2>
</div>
);
};
export default App;
如果您确认组件返回了单个JSX元素或null，但错误依然存在，请尝试更新React的类型声明。
更新React类型声明
在项目根目录打开终端，执行以下命令以更新依赖：
# 👇️ with NPM
npm install --save-dev @types/react@latest @types/react-dom@latest
# 👇️ if you also want to update react and react-dom
npm install react@latest react-dom@latest
# ------------------------------
# 👇️ with YARN
yarn add @types/react@latest @types/react-dom@latest --dev
# 👇️ if you also want to update react and react-dom
yarn add react@latest react-dom@latest
该命令会将更新到最新版本。
请务必重启开发服务器，必要时重启IDE。在停止并重新运行
npm start之前，服务器不会应用这些更改。
若问题仍未解决，请尝试删除node_modules和package-lock.json（注意不要删除package.json），然后重新运行npm install并重启IDE。
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock
# 👇️ clean npm cache
npm cache clean --force
npm install
如果错误依旧，请确保已完全重启IDE和开发服务器。VSCode等编辑器偶尔会出现缓存故障，重启往往能解决问题。
至此，关于React报错“组件不能作为JSX组件使用”的解决方法已介绍完毕。如需了解更多React JSX组件相关内容，请搜索本站历史文章或继续浏览后续文章，感谢支持！