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>
  )}
/>

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

Answer 1

您可以使用 React router's nav link

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