如何在react中同时添加简单的className和函数return

Question

我需要向NavLink添加2个类。其中一个是简单的单词"；"对话者"；第二个是"；活动int"；仅当链接处于活动时

我试过这个：

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

Answer 1

在react-router-domv6中，NavLink组件的className属性只接受字符串或函数。使用函数变体返回要使用的字符串化类名。

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

Answer 2

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

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