Question

我的组件看起来像这样，当然省略了一些不重要的细节：

as yn

当我将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'));时，一切正常。我在React网站上关注this guide，但没有成功。我在哪里错了？

编辑：

没有真正的错误消息，它只是给我一堆错误消息，上面写着“上述错误发生在您的React组件之一中”，但上面从未给我任何错误消息。

我正在将React 16.8.6与Create-React-App一起使用来处理Webpack方面的事情。

编辑2：

经过一番摆弄之后，我发现此修复程序使用的是import DialogBox from './DialogBox'组件，其反应如下：

<Suspense>

Answer 1

您需要通过提供要显示的后备组件来用React.Suspense包装惰性组件。（例如消息或加载的gif等）。

您可以用React.Fragment安全地替换React.Suspense。

class FlexiblePopupSelect extends React.Component {
  render() {
    return (
      <React.Suspense fallback={<div>Loading dialog box...</div>}>
        <DialogBox />
      </React.Suspense>
    )
  }
}

有关更多信息，请查看Code-Splitting > Suspense文档。

React Lazy加载导入失败

1 个答案: