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

Question

我的路线定义如下:

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

默认情况下，当您从 Foo 转换到 Bar 时，组件会被卸载。由于我在组件 Foo (带有自定义动画的 Google map )中有一个计算量大的代码，我想防止卸载并隐藏该组件，因此当用户返回时它将立即加载。

如何实现这一目标？

Answer 1

为了实现您的要求，您不能对 Foo 和 Bar 使用两个单独的路由。你只能为一个容器组件设置一个路由(我们将其命名为 FooBar)。 FooBar 结合了 Foo 和 Bar。使用 FooBar 的 state 更改 FooBar 的 render 函数中两个组件的可见性。