反应延迟加载昂贵的材料-UI模态

Question

我有一个昂贵的material-ui模态组件，需要大约1s的渲染时间，我尝试使用Suspense和React.lazy进行延迟加载，但是它对我不起作用，如果我正确理解的话，它只会导入延迟加载（ ？）

关于模态组件，没有从api或任何其他具有内部钩子和material-ui以及作为道具传递的数据的组件中获取信息

我现在所拥有的过程：

1. 我点击按钮
2. 1s通过
3. 所有内容均已加载且模式打开

我要完成的任务”

1. 我点击按钮
2. 模块会立即弹出并显示某种加载屏幕
3. 组件就绪后会显示

我该如何做出反应？

Answer 1

您可以在模态组件中应用一个简单的检查并有条件地渲染它。所以假设你有三个数据，你可以在返回数据的正下方使用三元运算符，只有当所有数据都被加载时，如果没有，则显示一个加载组件 示例代码可能会让您清楚我想说的内容。就我而言，数据来自 API，因此我检查了该数据是否已加载。

   function ModalComponent(data1, data2, data3){
    
      /////// other code //////
        return (
        <div>
        {data1 && data2 && data3 ? (
           <div>Your data </div>
        ) : <div>Loading....</div>
        }
        </div>)
    }
export default ModalComponent