如果当前在该路线中，则将导航选项卡样式 class 设置为活动状态

Question

我有一个 React 和 React-Router 应用程序，它使用 2 条嵌套路由来传递 3 条总路由：/、/about、/contact。当我单击 Link 转到每条路线时，位于父路线中的导航栏上的选项卡会更改样式并显示其活动状态，我相信有些 bootstrap 魔法。问题是当我访问 /about 或 /contact 时，导航选项卡未激活。我是新手，但我想我需要将 style 属性绑定到检查路由的属性或组件的道具或状态的条件。我不确定如何执行此操作，我们将不胜感激。

导航所在的简化布局

export default class Layout extends React.Component {
  render() { 
      return (
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </div>
    )}}

在

中我需要类似 class={if this.props.children == About, class=active, class=""}

渲染路线

render((
  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
  ), document.getElementById('app'))

是的，如上所述，li 需要检查 Layouts props.children 是否为 null，或者是关于还是联系。如果它是反应组件

，我真的不确定如何比较 this.props.children 的值

感谢所有先进！！！

Answer 1

根据我们在评论中的对话，这就是您在 <li> 标签上获得 active class 名称的方式：

注意：我假设您使用的是 React Router v1.0.x，我强烈建议您使用最新版本 - 2.0，请参阅 Upgrade Guides

import { Link, History } from 'react-router'

const Tab = React.createClass({
  mixins: [ History ],
  render() {
    let isActive = this.history.isActive(this.props.to, this.props.query)
    let className = isActive ? 'active' : ''
    return <li className={className}><Link {...this.props}/></li>
  }
})

// use it just like <Link/>, and you'll get an anchor wrapped in an `li`
// with an automatic `active` class on both.
<Tab href="foo">Foo</Tab>

如果您使用的是 ES6 classes，您会以非常相似的方式进行操作，但您需要从上下文 "pull" history 中 "pull" history (here is how to do it - 这又是在 React Router v1.0.x 分支上。

如果当前在该路线中，则将导航选项卡样式 class 设置为活动状态

set nav tab style class to active if currently in that route react react-router

javascript

css

twitter-bootstrap

reactjs

react-router