我的组件大致看起来像这样,当然省略了一些不重要的细节:
import React from 'react';
import { createMuiTheme, MuiThemeProvider, withStyles } from "@material-ui/core/styles";
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Tooltip from '@material-ui/core/Tooltip';
import { connect } from 'react-redux';
const DialogBox = React.lazy(() => import('./DialogBox'));
const mapStateToProps = (state, ownProps) => {
return {
answer: state.answers[state.stepper][ownProps.obj.ID]
}
}
const mapDispatchToProps = { }
class FlexiblePopupSelect extends React.Component {
render() {
return (
<React.Fragment>
<DialogBox />
</React.Fragment>
)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(FlexiblePopupSelect));
当我将
const DialogBox = React.lazy(() => import('./DialogBox'));
替换为普通的import DialogBox from './DialogBox'
时,一切都正常。我遵循了来自React网站的这个指南,但没有成功。我在哪里出错了?编辑:
没有真正的错误消息,它只给我一堆错误消息,说“上述错误发生在您的一个React组件中”,但它从未给我任何错误消息。
我正在使用React 16.8.6,Create-React-App处理Webpack方面的事情。
编辑2:
经过一些折腾,我发现修复方法是使用React的
<Suspense>
组件,如下:<React.Fragment>
<Suspense>
<DialogBox />
</Suspense>
</React.Fragment>
react-scripts
版本是多少(由create react app安装)?错误信息的行号是动态导入还是其他行? - Aprillion