React — 当加载到新页面时，活动项状态与菜单组件保持一致

Question

我有一个菜单组件在加载到不同页面时会丢失其状态。我是 React noobie，并试图找出管理“活动”菜单类的最佳方法。我正在使用 react-router，我认为我让这变得比它需要的更困难

导航包含在不同的页面中，如下所示：

// some component
<header className="autohide header-down">
  <Nav />
</header>

// some other component
<footer className="autohide header-down">
  <Nav />
</footer>

我在组件内部使用它来设置“活动”菜单项，但是（我应该预料到这一点）当导航组件被加载到新页面时，它会失去活动状态：

getInitialState(){
  return {
    selected:''
  }
},
setFilter(filter) {
  this.setState({selected  : filter})
  this.props.onChangeFilter(filter);
},
isActive(value){
  return 'nav-link '+((value===this.state.selected) ?'active':'');
},
onClick(){

},
render()...

每个链接上都有这个：

<Link className={this.isActive('settings')} onClick={this.setFilter.bind(this, 'settings')} to="/settings">SETTINGS</Link>

想法？

Answer 1

对于您当前的设置，只需将 active 属性从每个组件传递到您的标题：

const Dashboard = React.createClass({
  render() {
    return <div>
      <Nav active="dashboard" />
    </div>
  }
})

const About = React.createClass({
  render() {
    return <div>
      <Nav active="about" />
    </div>

  }
})

const Messages = React.createClass({
  render() {
    return <div>
      <Nav active="messages" />
      // other stuff
    </div>
  }
})

const Nav = React.createClass({
  isActive(value){
    return 'nav-link '+((value===this.props.active) ?'active':'');
  },
  render() {
    return <div>
      <Link className={this.isActive("settings")}>Settings</Link>
      <Link className={this.isActive("dashboard")}>Dashboard</Link>
    </div>
  }
})



render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Messages} />
      </Route>
    </Route>
  </Router>
), document.body)