根據 React 中的組件狀態更改 Bootstrap 類

Question

我有一個名為 NavBar 的反應組件。 它從另一個組件 (App.js) 獲取一個變量，該變量指定頁面是否處於暗模式。 該變量稱為“pageMode”。 我想根據“pageMode”變量的值將 navBar 的類從 navbar-light 更改為 navbar-dark。

這是代碼

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;

在渲染返回狀態中，[] 之間的類是我想要根據變量值更改的類。

謝謝閱讀！

Answer 1

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