React暗黑模式开发中模板字符串表达式报错原因咨询

错误提示翻译 #

意外的模板字符串表达式（no-template-curly-in-string）

问题原因 #

你在单引号包裹的普通字符串里用了模板字符串的${}插值语法，但模板字符串必须用**反引号（）**定义，单引号/双引号无法识别这种语法，触发了ESLint的no-template-curly-in-string`规则报错。

正确写法 #

方式一：使用模板字符串（推荐） #

用反引号包裹整个类名字符串，直接插入props.mode变量：

<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>

方式二：字符串拼接 #

如果习惯用单引号，可通过+连接字符串和变量：

<nav className={'navbar navbar-expand-lg navbar-' + props.mode + ' bg-' + props.mode}>

方式三：提前定义类名字符串 #

把类名提前赋值给变量，再传入className，代码更清晰：

const navClassName = `navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`;
<nav className={navClassName}>

内容的提问来源于stack exchange，提问作者Brahm Jagota