Question

民间！如果我的gatsby Link处于活动状态，我想更改内部的样式。我想通过display: none隐藏/显示子菜单。但是不知道如何将参数从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解决此问题。盖茨比的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>

这是一个具有到达路由器链接的codesandbox，但进行了一些自定义以匹配Gatsby Link的道具。

Gatsby：如果<link />处于活动状态，如何更改节点样式？

1 个答案: