在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 Router。任何帮助将不胜感激。谢谢。

Answer 1

我的第一个直觉是将className={match ? "active" : ""}添加到父项li，但是由于您对此有疑问，我假设您已经尝试过了。

您可以在孩子们的道具中进行挖掘，以了解他们中是否有match道具（或任何其他表明他们活跃的道具）。以下功能可以从孩子那里找到一个match道具。

const childMatch = children => {
  if (!children) { return false }
  if (Array.isArray(children)) {
    return children.reduce(
      (acc, child) => acc || Boolean(child.props.match),
      false
    )
  }
  return Boolean(children.props.match)
}

然后您可以像className={childMatch(this.props.children) ? "active" : ""}一样使用它。

如果您要寻找的道具在儿童树的更深处，您当然可以更深入地挖掘。您可以找到孙子child.props.children。