Question

我是React的新手并使用React开发我的第一个应用程序。我的应用程序有一个带有4个选项卡的选项卡组件，每个选项卡的内容都设置为一个单独的组件。现在我用4种不同的路线替换标签。所以，我摆脱了标签，并使用react-router来设置4条路线，每条路线分别对应4条路线。

使用选项卡，当导航到不同的选项卡并返回时，选项卡的内容将保持其状态。例如，假设选项卡有一个列表，用户已滚动到列表的底部。如果用户导航到另一个选项卡并返回，则列表将保持滚动到底部。这是我的应用程序所需的行为。

但是，我无法通过路由实现此行为。我注意到当我从一个路径导航到另一个路径时，组件被重新实例化（不仅仅是重新渲染）。我可以这样说，因为每当组件的路由变为活动状态时，就会调用组件的构造函数。

我想实现类似标签的行为。我知道对于Angular，有一个UI-Router-Extras库，它提供深度状态重定向（用于类似标签的导航）。它在我的Angular项目中运行得非常好。但我找不到React的类似选项。我尝试过react-router和react-router-component，并在路由变为活动状态时重新实例化组件。

是否有解决方案来实现React中路由的类似Tab的行为？

Answer 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>

Answer 2

您有两个选项，使用Redux，或根据选项卡显示/隐藏组件。

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

{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}

React Router - 如何实现标签式导航？

2 个答案: