React中根据pageMode值动态切换Bootstrap导航栏类名

你不需要写两套重复的nav JSX结构做分支返回，直接在className属性里做动态类名拼接即可，逻辑简洁且没有冗余代码：

• 移除render方法里空写的if/else判断块，重复维护两份完全一致的DOM结构会增加后续改样式的成本
• 在原本方括号标记的动态类名位置，用三元运算符判断父组件传入的pageMode值：值为dark时挂载navbar-dark类，否则挂载navbar-light类
• 可选优化：如果深色模式下导航栏背景需要同步切换，可以用相同的判断逻辑把固定写死的bg-light替换为动态类，深色模式匹配bg-dark、浅色模式匹配bg-light，视觉效果更统一

修改后的完整可运行代码如下：

import React from 'react';

class NavBar extends React.Component{ 
  render(){
    // 提前计算主题相关类名，JSX结构会更清晰
    const navThemeClass = this.props.pageMode === "dark" ? "navbar-dark bg-dark" : "navbar-light bg-light";

    return <nav className={`navbar navbar-expand-lg ${navThemeClass}`}>
      <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;

说明：这里用ES6模板字符串做类名拼接是React写动态类名最常用的原生方案，不需要引入额外的第三方类名工具库。如果你不想提前声明navThemeClass变量，也可以直接把三元判断逻辑写在模板字符串的插值位置，运行效果完全一致。

内容的提问来源于stack exchange，提问作者pedro martinez