如何在react-router中为Link或IndexLink的包装元素设置activeClassName？

Question

我是ReactJS世界的新手，并且想知道如何将活动的类名传递给<li>元素而不是<a>(Link)元素。

现在，我有这种代码。单击时，锚类会更改。

<li><IndexLink to='/' activeclassName='active'>A</IndexLink></li>
<li><Link to='/b' activeclassName='active'>B</Link></li>
<li><Link to='/c' activeclassName='active'>C</Link></li>

但我想得到类似的东西：

<li activeclassName='active'><IndexLink to='/'>A</IndexLink></li>
<li activeclassName='active'><Link to='/b'>B</Link></li>
<li activeclassName='active'><Link to='/c'>C</Link></li>

提前致谢

Answer 1

您需要将其封装<li>为路由器感知组件：

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

class NavItem extends React.Component {
  render () {
    const { router } = this.context
    const { index, onlyActiveOnIndex, to, children, ...props } = this.props

    const isActive = router.isActive(to, onlyActiveOnIndex)
    const LinkComponent = index ? Link : IndexLink

    return (
      <li className={isActive ? 'active' : ''}>
        <LinkComponent {...props}>{children}</LinkComponent>
      </li>
    )
  }
}

用法：

<ul>
  <NavItem to='/' index={true}>Home</NavItem>
  <NavItem to='/a'>A</NavItem>
</ul>

我从react-router-bootstrap模块https://github.com/react-bootstrap/react-router-
bootstrap/blob/master/src/LinkContainer.js进行了检查
。我没有测试它，所以让我知道它如何进行。