如何解决在React中放置NavBar
我是个有反应的初学者,请原谅使用的任何错误术语。我试图通过建立简单的个人档案来学习。是否可以将动态标题的NavBar组件放置在下面之下,该组件会根据您当前所在的页面而变化?我希望每个页面的内容流都采用以下格式:
- 标题
- 导航栏
- 页面内容
据我了解,NavBar组件呈现嵌套在其内部的每个单独页面的内容。我尝试创建<Header />
组件并传递属性,但是由于所有页面组件都已导入<NavBar />
组件内部,因此存在一些问题。我是否应该将所有组件以及<App />
组件都导入到我的主<NavBar />
组件中?或者我在错误的路径上/正在思考所有这一切吗?反应路由器是解决此问题的最佳方法,还是我可以利用另一种方法?
如有必要,我可以发布代码。任何和所有帮助表示赞赏!谢谢您的时间。
解决方法
使用react-router是路由的最佳方法。但是,在您的情况下,我将改为在navbar组件内嵌套这些组件。我将其作为相邻组件
class App extends Component{
state={
activeHeader:"home"
}
render(){
let main_component = null
switch(this.state.activComp){
case "Home" : <Home/>
....
}
return <>
<header activeComp={this.state.activeComp/>
<navbar activeComp={this.state.activeComp/>
{main_component}
</>
}
}
从header,navbar组件的道具中,您可以获取活动组件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。