我是React的新手,使用React开发我的第一个应用程序.我的应用程序有一个带有4个选项卡的选项卡组件,每个选项卡的内容都设置为一个单独的组件.现在我用4种不同的路线替换标签.所以,我摆脱了选项卡并使用react-router来设置4条路由,每条路由一条路由器.
使用选项卡时,选项卡的内容将在导航到其他选项卡并返回时保持其状态.例如,假设选项卡有一个列表,用户已滚动到列表的底部.如果用户导航到另一个选项卡并返回,则列表将保持滚动到底部.这是我的应用程序所需的行为.
但是,我无法通过路由实现此行为.我注意到当我从一个路径导航到另一个路径时,组件被重新实例化(而不仅仅是重新渲染).我可以这样说,因为每当组件的路由变为活动状态时,就会调用组件的构造函数.
我想实现类似标签的行为.我知道对于Angular,有一个UI-Router-Extras库,它提供深层重定向(用于类似标签的导航).它在我的Angular项目中运行得非常好.但我找不到React的类似选项.我尝试过react-router和react-router-component,并在路由变为活动状态时重新实例化组件.
是否有解决方案来实现React中的路由类似行为?
就个人而言,我选择在这种情况下抛弃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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。