Javascript 暂停和延迟加载材质UI中的一个模式

我正在应用

和

lazy（）

来优化我的项目。到目前为止，一切正常，但我注意到DOM的处理方式有了一些小的变化，这让我对自己的工作方式产生了一些困惑

让我们在CMS/仪表板上下文中假设此场景。当用户访问

/products/

时，react router将处理此

容器，获取组件并将其加载到页面上

在这个

容器中，有一个显示产品列表的数据表，还有一个添加按钮来添加新产品。单击此

添加按钮

将触发

以显示表单

// products.js

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

//products.js
类ProductsPage扩展了React.Components{
...
render（）{
{this.state.isShowingAddingProductForm&&(
)}
}
}

我正在为这个项目使用MaterialUI中的所有组件（datatable、button和modal）

关注点

我正在懒洋洋地加载

，一旦用户第一次点击

，就会导入

addModal.chunk.js

文件。这里的折衷是来自M-UI的动画。一旦我关闭模式，DOM将从页面中删除，因此表单关闭时不会出现动画。虽然这只是一个小的淡入淡出动画

如果删除

this.state.isShowingAddingProductForm

，动画将返回。但在这里，我发现即使用户不想添加新产品，网络也会加载

addModal.chunk.js

。想一想，你知道可能有4或5个其他模态在相同的逻辑上工作

问题：处理此模式场景的最佳方法是什么？我仍然希望从MaterialUI中保留惰性导入和小型内置动画

提前感谢，

制作以下内容：

    // products.js

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

//products.js
类ProductsPage扩展了React.Components{
...
render（）{
}
}

在AddModal组件中，使用prop

open

并将其传递给MUI modal

模态在关闭时没有动画，因为您的状态

为ShowingAddingProductForm

更改为false，AddModal从DOM中删除

它不依赖于惰性负载

---

如果您需要REST调用，那么modal是打开的，请在AddModal组件中使用

componendddimount

生命周期方法

实际上在我的项目中，我正是按照您的方法进行的，但事实证明，一旦装入

，块文件就会被加载