将道具传递给属性反应js

Question

const [mode_,setmode]=useState("dark")
<NavBar title="TextUtils" about="About TextUtils" mode={mode_} />

下面的代码不起作用，当我 console.log(props.mode) 它输出所需的字符串但 Navbar 组件没有变化
当我从浏览器中查看它时，它的<nav class="navbar navbar-expand=lg navbar-${props.mode} bg-${props.mode}">而不是<nav class="navbar navbar-expand=lg navbar-dark bg-dark">

//导航栏内部

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

Answer 1

使用模板文字而不是字符串文字，即“`”而不是“'”。

 const props = { mode: "dark" }; console.log('navbar navbar-expand=lg navbar-${props.mode} bg-${props.mode}'); console.log(`navbar navbar-expand=lg navbar-${props.mode} bg-${props.mode}`)

代码：

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