reactjs – 如何隐藏组件而不是卸载它？

发布时间：2020-12-15 16:16:36 所属栏目：百科来源：网络整理

导读：我的路线定义如下： Route component={App} IndexRoute component={Main}/ Route path="/foo" component={Foo}/ Route path="/bar" component={Bar}/ /Route 默认情况下,当您从Foo转换为Bar时,将卸载组件.由于我在组件Foo(带有自定义动画的Google地图)中有一

我的路线定义如下：

<Route component={App}>
    <IndexRoute component={Main}/>
    <Route path="/foo" component={Foo}/>
    <Route path="/bar" component={Bar}/>
  </Route>

默认情况下,当您从Foo转换为Bar时,将卸载组件.由于我在组件Foo(带有自定义动画的Google地图)中有一个计算量很大的代码,我想阻止卸载并隐藏这个组件,所以当用户返回时它会立即加载.

怎么做到这一点？

解决方法

为了满足您的要求,您不能为Foo和Bar使用两个单独的路线.您只能为容器组件设置一个路径(我们在此处将其命名为FooBar). FooBar结合了Foo和Bar.使用FooBar的状态来更改FooBar渲染功能中两个组件的可见性.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!