为什么活动类没有正确显示在检查元素时，NavLink写在另一个类的名字旁边?

Question

import React from "react";
import {NavLink} from "react-router-dom";
const MenuItem = ({items}) => {
const activeClassMenuItem = ({ isActive }) => (isActive ? "active_link" : "");
return (
<>
{items.map((item) => {
return (
<li className="menu-item" key={item.id}>
<NavLink
to={item.url}
className={`menu-link ${activeClassMenuItem}`}
>
<div data-i18n={item.title}>{item.title}</div>
</NavLink>
</li>
);
})}
</>
);
};
export default MenuItem;

在inspect元素中显示结果:('active_link'类也被放置)

<li class="menu-item ">
<a class="menu-link  _ref2 => { let { isActive } = _ref2; return isActive ? "active_link" : "" } active_link" href="/Login">
Login
</a>
</li>

当我尝试从NavLink有'active_link'类旁边的其他类的元素，不幸的是，输出不正确地放置在Inspect element

Answer 1

activeClassMenuItem是一个函数，你需要这样做(我假设项目有一个名为isActive的属性):

import React from "react";
import {NavLink} from "react-router-dom";
const MenuItem = ({items}) => {
const activeClassMenuItem = ({ isActive }) => (isActive ? "active_link" : "");
return (
<>
{items.map((item) => {
return (
<li className="menu-item" key={item.id}>
<NavLink
to={item.url}
className={`menu-link ${activeClassMenuItem(item)}`}
>
<div data-i18n={item.title}>{item.title}</div>
</NavLink>
</li>
);
})}
</>
);
};
export default MenuItem;