2

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

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'));normal 替换线时import DialogBox from './DialogBox'，一切正常。我按照React 网站上的这个指南进行操作，但没有成功。我在这里哪里做错了？

编辑：

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

我正在使用带有 Create-React-App 的 React 16.8.6 来处理 Webpack 方面的事情。

编辑2：

经过一番摆弄，我发现修复程序正在使用<Suspense>react 中的组件，如下所示：

<React.Fragment>
  <Suspense>
    <DialogBox />
  </Suspense>
</React.Fragment>
4

1 回答 1

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文档。

于 2019-07-15T18:47:33.347 回答