具有动态内容和行为的导航栏 [英] Navbar with dynamic content and behaviour

问题描述

假设我有以下 App.js:

App.js

 render() {返回 (<div><导航栏/><路由器><主页路径="/"/><RouteA path="/routeA"/><RouteB path="/routeB"/></路由器>

);}

所以我需要 <Navbar/> 在 /routeA 和 /routeB 中表现和外观不同.

例如，中有一个后退按钮.而当用户在/routeA中时，点击back btn会返回历史的一步.

然而，当用户在 /routeB 中时，不仅点击返回 btn 现在会弹出一个警告，我们还需要渲染一个在 中具有更新 props 的组件.导航栏/>.

所以我的做法是，redux:<Navbar/> 连接到它自己的 store 状态切片.然后，在我的路线中，为了使导航栏相应地动态化，我使用我的 function 和 component 分派动作以制作 <Navbar/> 表现和看起来我想要的方式.到目前为止一切顺利.

问题是我们无法序列化 store 中的function"和component"对象，然后是 localstorage...所以就像刷新时一样，它们消失了...

所以我对函数"的解决方法是立即在路由的构造函数中调度它.而对于组件"，我在路由的 render 方法中使用 Portal 将其插入到我的 ...

我的问题是你将如何以不同的方式实现这一点?

感谢阅读！

解决方案

你可以发送函数来路由组件并在组件挂载时调用这个函数，你可以在 NavBar 组件内部定义函数，并根据你所在的页面进行切换

updateLayout = (page) =>{this.setState({currentPage: page})}使成为() {返回 (<div><Navbar currentPage={this.state.currentPage}/><路由器><Home path="/" render={()=><ComponentHome updateLayout={this.updateLayout}>}/><RouteA path="/routeA" render={()=><ComponentA updateLayout={this.updateLayout}>}/><RouteB path="/routeB" render={()=><ComponentB updateLayout={this.updateLayout}>}/></路由器>

);

}

Say I have the following App.js:

App.js

  render() {
    return (
      <div>
        <Navbar />
        <Router>
          <Home path="/" />
          <RouteA path="/routeA" />
          <RouteB path="/routeB" /> 
        </Router>
      </div>
    );
  }

So I need the <Navbar /> to behave and look differently in the /routeA and /routeB.

For example, there is a back button in the <Navbar />. And when user is in /routeA, clicking the back btn will go back one step in history.

However, when user is in /routeB, not only that clicking back btn will now pops up an alert, we also need to render a component that has updating props inside the <Navbar />.

So the way I go about this is, well, redux: The <Navbar /> is connected to its own slice of state in the store. Then, in my routes, in order to make the navbar dynamic accordingly, I dispatch actions with my function and component to make the <Navbar /> behave and look the way I want. So far so good.

Problem is we can't serialize 'function' and 'component' objects in the store and subsequently localstorage...so like on refresh, they are gone...

So my workaround for the 'function' is I immediately dispatch it in the routes' constructor. Whereas for the 'component', I use Portal in my routes' render method to insert it to my <Navbar />...

My question is how would you implement this differently?

Thank you for reading!

解决方案

You can send function to route components and call this funciton when component is mounted, you can have functions defined inside NavBar component, and switch based on the page you are on.

updateLayout = (page) => {this.setState({currentPage: page})}
render() {
return (
  <div>
    <Navbar currentPage={this.state.currentPage} />
    <Router>
      <Home path="/" render={()=> <ComponentHome updateLayout={this.updateLayout}>} />
      <RouteA path="/routeA" render={()=> <ComponentA updateLayout={this.updateLayout}>} />
      <RouteB path="/routeB" render={()=> <ComponentB updateLayout={this.updateLayout}>} /> 
    </Router>
  </div>
);

}

这篇关于具有动态内容和行为的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！