报错截图
组件页面展示正常,控制台报错
index.js:1 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of BoundDialogBox.
in BoundDialogBox
报错定位
排查了整个BoundDialogBox组件,最终定位在自己封装的Tab组件,只有两个地方使用了这个组件,另一个组件正常显示。而在BoundDialogBox使用时报错。
奇怪的是引用和用法传参都是一模一样的
找到问题
我先尝试着把Tab引用地址改成了源文件,然后就神奇的好了,控制台错误就没了。
Why?
但不符合常理啊,正常那样写也不会不出问题啊,到底哪里出了问题呢? 还有为什么一个报错,另一个不报错?
问题的根本原因
于是我从页面渲染的先后顺序 对import的执行时机进行了梳理。
index.js 文件里封装的公共组件
,按需依次引入了组件,并统一导出
所以上面流程图,也就是为什么第一个组件报错,第二个组件不报错的原因。
把Tab组件引用提前,就可以不报错的通过index里引用,而不是直接引用文件(尤其多组件嵌套使用的时候需要注意)
不要学我代码洁癖
光顾着代码格式好看,忽略的import的执行时机😂。
不过看着确实挺舒服的不是吗,