解决 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,609评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,461评论 19 139
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,742评论 0 38
  • 《高效演讲》里面给我们讲了几个非常实用有效的方法:第一,开胃菜,想象一下,吃饭前吃的开胃的菜,那自然是个好...
    鸿运当头168阅读 1,508评论 0 0
  • 【感恩有你】20170525 学习力六期 践行记录D10 昨天晚上在带宝宝去公园玩的路上,我背了《敕勒歌》 北朝民...
    恩恩妈阅读 1,365评论 0 0