Javascript 如果当前在该路由中，则将导航选项卡样式类设置为活动

我有一个react和react路由器应用程序，使用2个嵌套路由来提供3个路由：/，/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>
    )}}

导出默认类布局扩展React.Component{
render（）{
返回(

关于
接触

)}}

在

中，我需要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'))

渲染((
)，document.getElementById（'app'））

是的，如上所述，li需要检查布局props.children是否为空，或者是关于或联系。我真的不知道如何比较this.props.children的值，如果它是一个组件

---

感谢所有先进的技术

根据我们在评论中的对话，以下是如何在您的

标签上激活

类名的方法：

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

从'react router'导入{Link，History}
const Tab=React.createClass({
mixins:[历史]，
render（）{
让isActive=this.history.isActive（this.props.to，this.props.query）
让className=isActive？“active”：”
return

}
})
//使用它就像，你会得到一个锚包裹在一个'李`
//在两个屏幕上都有一个自动的“活动”类。
福

如果您使用的是ES6类，那么您可以使用非常类似的方法，但是您需要从上下文中“拉入”
历史记录
（-这也是在React Router v1.0.x分支上）。
我建议您阅读文档，同时，在所有文档示例中，路由
/about
和
contact
（即嵌套的）放弃
/
。非常感谢，IndexLink非常有用。我不知道你说“在所有文档示例中，routes/about和contact（即嵌套的）放弃/”是什么意思。你能详细说明吗？在你的代码中，
path=“/about”
等，它与指定：
path=“about”的文档不匹配
（无正斜杠），我看到一些github问题，人们讨论了斜杠导致的问题。好的，谢谢，很高兴知道。仍然需要path=“/”对于父类，我认为。仍然无法使类处于活动状态。想想它的b/c，它设置了指向活动类的链接，但是bootstrap会查找带有活动类的
元素，并且不会通过路由使选项卡处于活动状态，只有当它单击时……我认为。@user1807880请查看1.0.x分支中的示例，特别是这一分支显示了e确切地说，您正试图做什么，但我仍在计算es6中的混合。特别是在选项卡组件中找到this.history.isActive并将历史正确地传递给is，我正在使用react router 2.0和es6@user1807880这就是为什么我说要查看升级指南，所有内容都应该在文档中，请参阅：如果您有更多问题ns我很乐意帮忙，在discord或twitter上联系。
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>