javascript - React/Jasvascript：地图函数中的动态类名设置

Question

我有一个显示用户仪表板导航的功能。此功能应将活动功能设置为此 elem waht 点击默认为 1 个起始元素/链接。但我得到无限循环。

const UserLinks = [
  {
    name: "User Details",
    linkTo: "/dashboard",
  },
  {
    name: "Change Password",
    linkTo: "/dashboard/changePassword",
  },
];
const DasboardLinks = () => {

  const [active, setActive] = useState(1);

  return (
    <SectionNavigation>
      <ul>
        { UserLinks.map((link, i) => (
              <li key={i} className={active === i ? "active" : ""}
            onClick={setActive(i)}>
                <Link to={link.linkTo}>{link.name}</Link>
              </li>
            ))}
      </ul>
    </SectionNavigation>
  );
};

当它被执行时，我得到了太多的重新渲染。React 限制了渲染的数量以防止无限循环。如何修复它以使其正常工作。

标签： javascriptreactjs

Answer 1

您正在调用 setActive 而不是传递函数：

onClick={() => setActive(i)}>