將道具傳遞給屬性反應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}`}>