Гэтсби: Как изменить стиль узла, еслиактивен?

Question

люди! Я хочу изменить стиль внутренней части, если моя ссылка Гэтсби активна. Я хочу скрыть / показать подменю display: none. Но понятия не имею, как передать этот параметр из ссылки в другое место. Какие-нибудь мысли? Большое спасибо

Я пытался получить или передать состояние, как на этой странице Достигнуть ссылки , но тоже не повезло

return (
  <li key={`sidebar-id${i}`}>
    <Link to={item.path} activeStyle={{ color: "red" }} partiallyActive={true}>
      {item.name}
    </Link>
    <ul className={`${styles.menu__secondLevel} small-body-text`} style={ifLinkisActive}>
      {subItems}
    </ul>
  </li>
);

Вот весь код для элементов боковой панели:

const SidebarItems = routes.map((item, i) => {
  // If Sidebar has sub items
  if (item.items) {
    // Loop trough sub items
    const subItems = item.items.map((subItem, j) => {
      return (
        <li key={`sidebar-id${j}`}>
          <Link to={subItem.path}>{subItem.name}</Link>
        </li>
      );
    });
    // Main menu with "subItems" variable
    return (
      <li key={`sidebar-id${i}`}>
        <Link
          to={item.path}
          activeStyle={{ color: "red" }}
          partiallyActive={true}
        >
          {item.name}
        </Link>
        <ul className={`${styles.menu__secondLevel} small-body-text`}>
          {subItems}
        </ul>
      </li>
    );
    // If doesn't have
  } else {
    return (
      <li key={`sidebar-id${i}`}>
        <Link to={item.path} activeStyle={{ color: "red" }}>
          {item.name}
        </Link>
      </li>
    );
  }
});

Answer 1

Я думаю, что вы можете решить это с помощью CSS. У Link Гэтсби есть activeClassName реквизит, который присоединит класс к активной ссылке. Вы можете использовать селектор css + для стилизации брата ul.

a.active {
  color: red;
}

.active + .submenu {
  display: block;
}

.submenu {
  display: none;
}

<a class="active" href="#">Active</a>
<ul class="submenu">
  <li>Submenu</li>
</ul>

Вот кодовый ящик с каналом доступа к маршрутизатору, но немного настроенный под реквизиты Гэтсби Линка.