背景
尝试使用React + TypeScript + Webpack的过程中，在父组件中引入子组件的时候，打包过程没有任何错误，但是页面一片空白，立马打开console控制台，发现一片红。。。
报错信息.png
排查
查看发现是说Home组件的render内部出现了问题，但是render内部都是一些常规的页面渲染处理，会出什么问题呢？于是尝试将引入的子组件注释掉，发现。。。真的是子组件引用的锅。
将自组件内容完全搬出放在Home中，页面正常渲染，这下就蒙蔽了。机缘巧合之下发现是不是引入子组件的时候出了问题。
` home.tsx`
const FlexWrap = require('./../../components/flexWrap/FlexWrap.tsx');
export class Home extends React.Component<HomeProps,HomeState> {
render(){
return(
<div>
<FlexWrap/>
</div>
)
}
}
`FlexWrap.tsx`
class FlexWrap extends React.Component<FlexWrapProps,{ }> {
render(){
return(
<div>...</div>
)
}
}
export default FlexWrap;
解决方案
将Home.tsx中引入子组件的部分改成
import FlexWrap from '../../components/flexWrap/FlexWrap';即可。
反思
-
import {FlexWrap} from '../../components/flexWrap/FlexWrap';
使用{ }会报错，因为在子组件中是用export default; 只有子组件中使用export导出的情况下才能用这种。 -
import FlexWrap from '../../components/flexWrap/FlexWrap';
正确方案。 - const FlexWrap = require('./../../components/flexWrap/FlexWrap.tsx');
应使用moudle.exports = xxxx
规范不清楚，混用了。。。
参考： https://www.cnblogs.com/libin-1/p/7127481.html
