如果我的一个孩子 NavLink 激活，如何将活动添加到我的父元素？

【问题标题】：How to add active to my parent element if one of my child NavLink activated?如果我的一个孩子 NavLink 激活，如何将活动添加到我的父元素？
【发布时间】：2022-06-15 23:47:26
【问题描述】：

我正在实现我的导航栏活动元素功能。我正在使用 react-router V6 中的 NavLink 组件，如下面的文档。 https://reactrouter.com/docs/en/v6/components/nav-link

但是如果我选择任何子 NavLink，我无法解决如何将活动添加到父级。这就是我如何为我的孩子实现 active 的代码。

<ul className="accordion-content">
  <NavLink
    to="/hc20/shipment/create"
    className={({ isActive }) => (isActive ? "link-active" : "disable")}
  >
    <li className="aside_list-item">Create Shipments</li>
  </NavLink>
  <NavLink
    to="/hc20/shipment/NOC"
    className={({ isActive }) => (isActive ? "link-active" : "disable")}
  >
    <li className="aside_list-item">NOC</li>
  </NavLink>
  <NavLink
    to="/hc20/shipment/trends"
    className={({ isActive }) => (isActive ? "link-active" : "disable")}
  >
    <li className="aside_list-item">Trends</li>
  </NavLink>
</ul>

如果有任何子 Navlink 激活，我想在我的 "accordion-content" 类中添加一个名为 active 的新类。如果能用反应钩子解决，将不胜感激。

【问题讨论】：

• 您能否将用于设置无序列表和导航链接样式的 CSS 作为minimal, complete, and reproducible code example 的一部分包含在内？

标签： reactjs react-hooks react-router