React中props传递至组件属性失效：模板字符串未解析问题

问题原因 #

你在NavBar组件的className中使用了单引号包裹字符串，但ES6模板字符串的变量解析语法${}必须搭配**反引号（）**才能生效。单引号会将整个内容视为普通文本，导致${props.mode}没有被替换成实际的dark`值，直接原样输出到HTML中。

另外注意代码里的navbar-expand=lg是语法错误，应该改为navbar-expand-lg，否则Bootstrap的响应式导航样式不会生效。

解决方案 #

将className的单引号替换为反引号，同时修正Bootstrap类名的错误：

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

修改后，模板字符串会正确解析props.mode的值，最终渲染出预期的<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>。

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