[英]Change Bootstrap class depending of component state in React
I have a react component called NavBar.我有一个名为 NavBar 的反应组件。 It gets a variable from another component (App.js) which specifies if the page is in dark mode or not.
它从另一个组件 (App.js) 获取一个变量,该变量指定页面是否处于暗模式。 The variable is called "pageMode".
该变量称为“pageMode”。 I want to change the class of the navBar from navbar-light to navbar-dark depending of the value of the "pageMode" var.
我想根据“pageMode”变量的值将 navBar 的类从 navbar-light 更改为 navbar-dark。
Here´s the code这是代码
import React from 'react';
class NavBar extends React.Component{
render(){
if(this.props.pageMode === "dark"){
//Here I want to do something to render the component using navbar-dark class
}
else{
//Render using navbar-light class
}
return <nav className="navbar navbar-expand-lg [navbar-light] bg-light">
<a className="navbar-brand NavBar-title-fix" href="#">Inicio</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Proyectos</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Sobre mi</a>
</li>
</ul>
</div>
</nav>
}
}
export default NavBar;
In the render return state the class between [] is the one that i want to be changed depending of the variable value.在渲染返回状态中,[] 之间的类是我想要根据变量值更改的类。
Thanks for reading!谢谢阅读!
import React from 'react';
class NavBar extends React.Component{
render(){
const themeClass = {
dark: '[navbar-dark]',
light: '[navbar-light]'
}[this.props.pageMode]
return <nav className={`navbar navbar-expand-lg ${themeClass} bg-light`}>
<a className="navbar-brand NavBar-title-fix" href="#">Inicio</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Proyectos</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Sobre mi</a>
</li>
</ul>
</div>
</nav>
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.