10

我的应用程序有一个带有 4 个选项卡的选项卡组件。每个选项卡的内容都设置为单独的组件。我正在用 4 条不同的路线替换选项卡。我摆脱了选项卡并习惯于react-router设置 4 条路由，4 个组件中的每一个都有一个。

导航到和离开选项卡时，选项卡的内容将保持其状态。例如，假设用户在一个选项卡中滚动到列表底部。如果用户导航到不同的选项卡并返回，列表将保持滚动到底部。

我无法通过路由实现这种行为。我注意到，当我从一条路线导航到另一条路线时，组件会被重新实例化（而不仅仅是重新渲染）。

我想实现类似标签的行为。我知道有一个名为 UI-Router-Extras for Angular 的库，它提供深度状态重定向。但我找不到类似的 React 选项。我已经尝试过react-router并且react-router-component都在其路由变为活动状态时重新实例化组件。

是否有解决方案来实现 React 中路由的这种行为？

4

2 回答 2

1

就个人而言，在这种情况下，我选择放弃 react-router 并创建一个父组件，其状态包含要显示的当前选项卡，而仅显示活动选项卡。

这是一个非常简单的例子

    <div
      style={{display: this.state.currentTab === 'component_a' ? 'block' : 'none'}}
    >
      <ComponentA />
    </div>
    <div
      style={{display: this.state.currentTab === 'component_b' ? 'block' : 'none'}}
    >
      <ComponentB />
    </div>
于 2016-12-13T16:05:12.040 回答
0

你有两个选择，使用 Redux，或者基于选项卡显示/隐藏组件。

这是一个显示/隐藏组件的示例

{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}
于 2017-12-17T06:20:01.643 回答