Динамическое добавление активного класса в многоуровневое меню боковой панели в 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.