如何在 data-grid material-ui 中使用延迟加载答案

【问题标题】：How to use lazy loading in data-grid material-ui如何在 data-grid material-ui 中使用延迟加载
【发布时间】：2021-07-22 11:30:51
【问题描述】：

当我通过延迟加载导入数据网格时，错误来了。

const DataGrid = lazy(async () => await import('@material-ui/data-grid'))

请告诉我是否正确导入，因为当我导入其他材料 UI 组件时，该组件工作正常，但对于数据网格导入它会发生错误。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

DataGrid 不是默认导出，所以试试

const DataGrid = React.lazy(
  () => import('@material-ui/data-grid').then(module => ({ default: module.DataGrid }))
);

React.lazy 接受一个必须调用动态 import() 的函数。这必须返回一个 Promise，它解析为具有默认导出的模块包含一个 React 组件。

【讨论】：

【解决方案2】：

对我来说，根据@Someone Special 的回答，下面的代码可以正常工作

import React, { lazy, Suspense } from 'react';

const loadable = (importFunc, { fallback = null } = { fallback: null }) => {
  const LazyComponent = lazy(importFunc);

  return props => (
    <Suspense fallback={fallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

export default loadable;


import React, { Suspense } from 'react';
import { Loading } from 'dan-components';
import loadable from '../../utils/loadable';
const DataGrid = loadable(() =>
  import('@material-ui/data-grid').then(module => {
    return { default: module.DataGrid };
  }),
);

const LazyDataGrid = props => {
  return (
    <Suspense fallback={<Loading />}>
      <DataGrid {...props} />
    </Suspense>
  );
};

export default LazyDataGrid;

【讨论】：