解决 React 编程报错:Element type is invalid:expected a string or a class/function...

问题背景

项目采用的是 react + webpack 开发模式。其中,ManageLayout.js 文件的主体代码如下图所示:

ManageLayout.js 文件

该文件主要功能:导出了两个类: ManageMainLayoutLeftNavMenu,用于整体的布局之用(其实细节此处可以忽略)。注意导出的不同方式:一个采用default默认导出方式,另一个则采用了一般导出方式。这也正是我下面出错的原因所在。

然后呢,我在另一个 JavaScript 文件里,做了如下面代码的导入引用:
import { ManageMainLayout } from '../../components/ManageLayout'

结果,console 控制台就报错了。错误信息信息如下所示:

报错信息

相信大牛、大神级的人物,看到此处可能已经立即锁定错误的原因了。不知道也不要紧,下面详解!

解决方法

这类错误,往往都比较隐蔽,而且没有指向具体的错误代码,不太容易定位到具体代码位置。

几番思虑、修改后,也未能得到有效解决。于是,求助于网上大神,百度(或Google)一下吧!在Stack Overflow的一篇帖子中,我找到了蛛丝马迹。给我灵感的片段如下:

源于 Stack Overflow 的见解

可不是么!于是我立刻修改代码如下:

import ManageMainLayout from '../../components/ManageLayout' ;

再启动服务,调试,立马通过了!汗!引入默认default导出的函数、类等,我竟然还用{ } 把它给括起来了,这是错误的根源。

赞美 Stack Overflow

每个人都有盲点!就像此处的一个{ }而已,可能有的人压根儿就不会在这个地方犯错,而有的人呢,在这里栽跟头却也找不到“北”!得力于有着像 StackOverflows 这样优秀的平台,集百家之言、通“盲点”之变,而致力于呈现出编程世界的欣欣向荣!在此,再次感谢!

最后,在 web 开发遇到问题时,强烈推荐去 StackOverflows 网站寻找相关的解决方案与灵感,这个网站确实,牛!!

Stack Overflow Logo

推荐阅读更多精彩内容