javascript - 在 NextJS 中将 CSS 模块类声明为变量

Question

如果我忘记了什么，请原谅 - 这是我在 Stack Overflow 上的第一篇文章。

该函数的目的是打开和关闭我的汉堡包菜单。我附上了这个问题所在的 JSX 文件的快照:NavbarLinks.jsx .我正在努力处理的代码行是 15 和 18，我试图将 CSS 模块类声明为变量。

const [navLinkOpen, navLinkToggle] = useState(false);
  const handleNavLinksToggle = () => {
    navLinkToggle(!navLinkOpen);
  };

  const renderClasses = () => {
    let classes = {`${styles.navLinks}`};

    if (navLinkOpen) {
      classes += {`${styles.active}`};
    }

    return classes;
  };

然后我在第 27 行的 ul 标记内调用返回的类。

<ul className={renderClasses}>

我已经尝试了几种将此类声明为变量的变体，我在这里向您展示的只是我最后的尝试。我知道我正在使用的尝试破坏了代码。 - 我是 JavaScript 的新手，我不是简单地遵循 YouTube 指南，而是通过自己尝试来更好地学习。

请尝试回答我的问题，而不是建议替代方法，纯粹是因为我只是想了解更多相关信息! - 但如果您确实有我在这里尝试实现的替代方法，我也非常希望看到它们。

我还将包括我正在使用的 CSS 模块文件的快照，以防您发现它有用:NavbarLinksStyle.module.css

在此先感谢您的帮助 - 将随时回答任何问题。

Answer 1

首先，恭喜你获得了这个职位。解释得很好。您共享的代码总体上看起来相当不错，但据我所知，您缺少 renderClasses 函数的执行。

const [navLinkOpen, navLinkToggle] = useState(false);
  const handleNavLinksToggle = () => {
    navLinkToggle(!navLinkOpen);
  };

  const renderClasses = () => {
    let classes = styles.navLinks;

    if (navLinkOpen) {
      classes += styles.active;
    }

    return classes;
  };

  {...}
    <ul className={renderClasses()}> 
  {...}

此外，您可以通过使用变量而不是函数来获得相同的结果:

const renderClasses = `${styles.navLinks} ${navLinkOpen ? styles.active : ''}`;

编辑:正如@Mina 指出的那样，您应该去掉渲染函数中的大括号。