盖茨比：如果 <Link /> 处于活动状态，如何更改节点样式？

Question

伙计们！如果我的 gatsby Link 处于活动状态，我想更改 inner inside 的样式。我想要 display: none 的 hide/show 子菜单。但是不知道如何将此参数从 Link 传递到其他地方。有什么想法吗？非常感谢

我尝试过获取或传递此页面上的状态 Reach Link，但也没有成功

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 解决这个问题。 Gatsby 的 Link 有一个 activeClassName 道具，它将 class 附加到活动 link。您可以使用 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>

这是一个 codesandbox 和 reach-router Link，但进行了一些定制以匹配 Gatsby Link 的道具。

盖茨比：如果 <Link /> 处于活动状态，如何更改节点样式？

Gatsby: How to change a node style if <Link /> is active?

onclick

toggle

reactjs

gatsby