javascript - 在 REACT JS 中将活动类动态添加到多级侧边栏菜单

Question

我目前正在 REACT 中创建一个多级侧边栏菜单，并且我想<li>在当前路由处于活动状态时动态地将活动类添加到父级。

下面的代码是我如何为单个菜单执行此操作。

<Route
  path={this.props.to}
  exact={this.props.activeOnlyWhenExact}
  children={({ match }) => (
    <li className={match ? "active" : ""}>
      <Link to={this.props.to} activeClassName="active">
        <span className="sidebar-mini-icon">
          <i className={this.props.icon}></i></span>
          {this.props.label}
      </Link>
    </li>
  )}
/>

现在我想知道如何使用多级菜单来做到这一点。我的菜单是这样的；

如您所见，只有菜单具有活动类。这是我的多级菜单代码：

<Route
  path={this.props.to}
  exact={this.props.activeOnlyWhenExact}
  children={({ match }) => (
  <li>
    <a data-toggle="collapse" href="#Collapse">
      <span className="sidebar-mini-icon">
        <i className={this.props.icon}></i>
      </span>
      <span className="sidebar-normal">
        {this.props.name}
        <b className="caret"></b>
      </span>
    </a>
    <div class="collapse" id="Collapse">
       <ul className="nav">
         {this.props.children}
       </ul>
    </div>
  </li>
  )}
/>

我正在使用反应路由器。任何帮助将不胜感激。谢谢你。

标签： javascriptreactjsreact-router

Answer 1

你可以使用React 路由器的导航链接

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>