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中的所有这些组件（数据表，按钮和模式）。

关注

我是lazyLoading <AddModal />，一旦用户第一次单击addModal.chunk.js，就会导入<AddButton />文件。这里的权衡是M-UI的动画。关闭模态后，将从页面上删除DOM，因此关闭表单时不会显示任何动画。虽然这只是一个小的淡入淡出动画。
如果我删除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组件中，使用道具open并将其传递给MUI模态

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

它不依赖于延迟加载

如果您需要REST调用，则模式已打开，请在AddModal组件中使用componendDidMount生命周期方法

暂停和延迟加载Material-UI中的模态

1 个答案: