React报错：预期组件为类/函数却得到object，检查KamdemSectionTabs渲染方法

报错根因 #

该报错核心是代码中某个要渲染的React组件不符合预期：React期望拿到内置组件对应的字符串、自定义组件对应的类/函数，实际拿到的是对象。按照以下优先级排查即可解决：

1. 优先排查自定义组件导入导出不匹配问题 #

这是该报错最高发的原因，检查你引入的KamdemGridContainer、KamdemGridItem、KamdemTabs三个自定义组件的导出方式：

• 如果组件是用export default 组件名的方式导出，当前的默认导入写法正确
• 如果组件是用export const 组件名 = () => {}的命名方式导出，需要把导入语句修改为命名导入写法，示例如下：

// 错误写法（命名导出的组件用了默认导入）
import KamdemTabs from "../Tabs/KamdemTabs.js";
// 正确写法
import { KamdemTabs } from "../Tabs/KamdemTabs.js";

三个组件都要对应检查，只要有一个导入导出不匹配就会触发该报错。

2. 检查KamdemTabs组件内部的图标渲染逻辑 #

你给KamdemTabs传的tabIcon是Face这类图标组件本身，KamdemTabs内部渲染图标时必须将拿到的图标值赋值给首字母大写的变量再渲染，示例如下：

// KamdemTabs 内部正确渲染逻辑
tabs.map(tabItem => {
  // 必须赋值给首字母大写的变量
  const TabIcon = tabItem.tabIcon;
  return (
    <div className="tab-item">
      <TabIcon />
      <span>{tabItem.tabName}</span>
    </div>
  )
})

如果直接写<tabItem.tabIcon />或者用小写变量名渲染，React会将其识别为原生HTML标签，触发报错。

3. 检查Material UI版本与图标包的匹配性 #

如果你的项目已经升级到Material UI v5（依赖包名为@mui/material），则v4版本的@material-ui/icons包不兼容，需要安装v5对应的图标包@mui/icons-material，并修改图标导入语句：

// 错误写法（v5项目用了v4的图标包导入）
import Face from "@material-ui/icons/Face";
// 正确写法
import Face from "@mui/icons-material/Face";

4. 检查KamdemSectionTabs自身的导入逻辑 #

你当前代码是用export default KamdemSectionTabs导出该组件，确认其他地方引入该组件时用的是默认导入，不要写成import { KamdemSectionTabs } from './路径'的命名导入写法。

内容的提问来源于stack exchange，提问作者patelot