Material-UI 中的悬念和延迟加载模态

Question

我正在应用<Suspense /> 和lazy() 来优化我的项目。到目前为止一切正常，但我注意到处理 DOM 的方式发生了一些小变化，这让我对自己的工作方式有些困惑。

让我们在 CMS/仪表板上下文中假设这种情况。当用户访问/products/ 时，react-router 会处理这个<ProductPage /> 容器，获取组件并将其加载到页面上。

在这个<ProductPage /> 容器中，有一个显示产品列表的数据表，以及一个用于添加新产品的添加按钮。单击此Add buton 将触发<Modal /> 以显示表单。

// products.js

class ProductsPage extends React.Components {
   ...
   render() {
      <Grid>
         <AddButton />
         <ProductsDatatable />
         { this.state.isShowingAddingProductForm && (
            <AddModal />
         )}
      </Grid>
   }
}

我在这个项目中使用 Material-UI 中的所有这些组件（数据表、按钮和模式）。

关注

1. 我是lazyLoading<AddModal />，一旦用户第一次点击<AddButton />，就会导入addModal.chunk.js文件。这里的权衡是来自 M-UI 的动画。一旦我关闭模态，DOM 将从页面中删除，因此表单关闭时不会有动画。虽然这只是一个小的淡入淡出动画。

2. 如果我删除this.state.isShowingAddingProductForm，动画将返回。但是在这里我发现即使用户不想添加新产品，网络也会加载addModal.chunk.js。稍微想一想，您就会知道可能有 4 或 5 个其他模式在使用相同的逻辑。

问题：处理这种模态场景的最佳方法是什么？我仍然想保留 Material-UI 中的惰性导入和小型内置动画。

提前致谢，

Answer 1

做这个：

    // products.js

class ProductsPage extends React.Components {
   ...
   render() {
      <Grid>
         <AddButton />
         <ProductsDatatable />
         <AddModal open={this.state.isShowingAddingProductForm}/>
      </Grid>
   }
}

并且在 AddModal 组件中使用 prop open 并将其传递给 MUI modal

您的 Modal 没有关闭动画，因为您的状态 isShowingAddingProductForm 更改为 false 并且 AddModal 从 DOM 中删除。

而且它不依赖于延迟加载

如果您需要 REST 调用然后打开 modal，请在 AddModal 组件中使用 componendDidMount 生命周期方法