在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指出的，你应该去掉渲染函数中的花括号。

Answer 2

首先，你不应该用大括号声明classes变量。

const renderClasses = () => {
let classes = styles.navLinks
if (navLinkOpen) {
classes += styles.active
}
return classes;
};