javascript 如何将NavLink(react-router v6.8.1中)给出的“isActive”状态传递给其子节点的className？[duplicate]

jm81lzqq 于 2023-02-11 发布在 Java

关注(0)|答案(1)|浏览(115)

- 此问题在此处已有答案**：

React NavLink change sub element according to isActive（1个答案）
5小时前关门了。
我无法将isActive状态从Navlink传递到其子级className（item.icon和span）。

<ul className="flex flex-col gap-2 px-3">
  {sidebarLinks.map((item) => {
    return (
      <li key={item.name}>
        <NavLink
          to={item.href}
          className={({ isActive }) => isActive
            ? "group flex cursor-pointer items-center gap-3 rounded-md bg-gray-200 px-3 py-2 transition-all"
            : "group flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 transition-all hover:bg-gray-200 "
          }
        >
          {/* <item.icon
            className={`h-5 stroke-gray-400 stroke-2 group-hover:stroke-blue-700`}
          /> */}
          {/* -------------------PROBLEM STARTS IS FROM HERE----------------------*/}
          <item.icon
            className={`h-5 stroke-2 ${({ isActive }) => isActive
              ? "stroke-blue-700"
              : "stroke-gray-400"}`
            }
          />
          <span
            className={`font-semibold text-gray-700 group-hover:text-gray-900 ${
              ({ isActive, }) => (isActive ? "text-red-800" : "text-green-700")
            }`}
          >
            {item.name}
          </span>
        </NavLink>
      </li>
    );
  })}
</ul>

这是检查时显示的内容：

我尝试将isActive状态存储到一个新的状态变量中，但是react拒绝了它并抛出错误。
我也试过将它的布尔值存储在某个变量中。但我也做不到。
我所期望的是将isActive状态从父元素NavLink传递到其子元素（一个icon和一个span）。
如果我做错了，请纠正我.

JavaScript

来源：https://stackoverflow.com/questions/75411260/how-to-pass-the-isactive-state-given-by-navlink-in-react-router-v6-8-1-to-it

1条答案

按热度按时间

q9yhzks01#

不能在span和item.icon className属性（如NaveLisk的className属性）中使用isActive，但可以使用以下方法：

<ul className="flex flex-col gap-2 px-3">
  {sidebarLinks.map((item) => {
    return (
      <li key={item.name}>
        <NavLink
          to={item.href}
          className={({ isActive }) =>
            isActive
              ? "group flex cursor-pointer items-center gap-3 rounded-md bg-gray-200 px-3 py-2 transition-all"
              : "group flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 transition-all hover:bg-gray-200 "
          }
        >{({isActive})=>{
            return (<>
            <item.icon 
              className={ isActive ? "h-5 stroke-2 stroke-blue-700" : "stroke-gray-400"}
            />
              <span
                className={`font-semibold text-gray-700 group-hover:text-gray-900 ${isActive ? "text-red-800" : "text-green-700"}`}
              >{item.name}</span>
            </>)
          }}
        </NavLink>
      </li>
    );
  })}
</ul>

我将此函数作为NavLink子函数发送：

{({isActive})=>{
            return (<>
            <item.icon 
              className={ isActive ? "h-5 stroke-2 stroke-blue-700" : "stroke-gray-400"}
            />
              <span
                className={`font-semibold text-gray-700 group-hover:text-gray-900 ${isActive ? "text-red-800" : "text-green-700"}`}
              >{item.name}</span>
            </>)
          }}

赞(0）回复(0）举报 2023-02-11

我来回答

javascript 如何将NavLink(react-router v6.8.1中)给出的“isActive”状态传递给其子节点的className？[duplicate]

1条答案

相关问题

热门标签

最新问答