如何在反应中同时添加简单的类名和函数return

Question

我需要将 2 类添加到 NavLink。其中之一是简单的单词“interlocuter”，第二个是“active-int”，仅当 link 处于活动状态时

我试过这个：

<NavLink
  to="some-path"
  className={`${moduleStyle["simple-text"]} ${({isActive}) => isActive ? : 'active-int' : ''}`}
>
  Link
</NavLink>

Answer 1

您可以使用 activeClassName，文档：https://v5.reactrouter.com/web/api/NavLink/activeclassname-string

<NavLink
  to="/somepath"
  activeClassName="active-int"
  className="interlocuter"
>

Answer 2

在 react-router-dom v6 中，NavLink 组件的 className 属性仅采用字符串或函数。使用函数变体 return 您要使用的字符串化类名。

<NavLink
  to="some-path"
  className={({ isActive }) =>
    [
      moduleStyle["simple-text"],
      isActive ? : 'active-int' : null
    ]
      .filter(Boolean)
      .join(" ")
  }
>
  Link
</NavLink>

如何在反应中同时添加简单的类名和函数return

how to add simple className and fucntion return at the same time in react

reactjs

react-router

react-router-dom

我试过这个：