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

the code below is not working, when i console.log(props.mode) it outputs required string but there is no change in the Navbar component
when i view it from the browser its <nav class="navbar navbar-expand=lg navbar-${props.mode} bg-${props.mode}"> instead of <nav class="navbar navbar-expand=lg navbar-dark bg-dark">

//在导航栏内

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

推荐答案

使用模板文字而不是字符串文字,即用"`"代替"‘".

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}`}>

Javascript相关问答推荐

硬币兑换运行超时

了解Node.js中的EventEums和浏览器中的addEventEums之间的关系

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

使用i18next在React中不重新加载翻译动态数据的问题

colored颜色 检测JS,平均图像 colored颜色 检测JS

自定义高图中的x轴标签序列

当试图显示小部件时,使用者会出现JavaScript错误.

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

如何在 cypress 中使用静态嵌套循环

如何从HTML对话框中检索单选项组的值?

OpenAI转录API错误请求

搜索功能不是在分页的每一页上进行搜索

FireBase云函数-函数外部的ENV变量

在验证和提交表单后使用useNavigate()进行react 重定向,使用带有加载器和操作的路由

将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

在GraphQL解析器中修改上下文值

为什么我的SoupRequest";被重置为初始值,以及如何修复它?

material UI自动完成全宽

ReactJS Sweep Line:优化SciChartJS性能,重用wasmContext进行多图表渲染

我如何让我的弹力球在JavaScript和HTML画布中相互碰撞后改变 colored颜色 ?