时间戳

首页 > 解决方案 > 用主题反应导航栏处理程序

javascript - 用主题反应导航栏处理程序

问题描述

我已经为我的 React 应用程序导入了一个引导主题，并且我有一个条件类，而不是导航栏应该折叠或不折叠collapse。

所以我用三元表达式制作了一个处理程序来有条件地渲染类。

 <div 
 className={["navbar-collapse "  + this.state.navCollapsed ? 'collapse' : '' ]} 
  id="navbarColor01" >
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>

具有各自的状态，以及处理条件的处理程序。

   state = {
    navCollapsed: false
  }

  onToggleNav = () => {
    console.log('its working')
    console.log(this.state.navCollapsed)
    this.setState({navCollapsed: !this.state.navCollapsed})
  }

我的问题是，每当我使用三元表达式来呈现名称时，它不会在导航栏中显示任何其他项目，并且切换不起作用。¨

<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/minty/bootstrap.min.css" rel="stylesheet" integrity="sha384-Qt9Hug5NfnQDGMoaQYXN1+PiQvda7poO7/5k4qAmMN6evu0oDFMJTyjqaoTGHdqf" crossorigin="anonymous">

这是我使用的主题的链接。

我尝试过手动渲染条件，两个姓氏在一个javascript数组中，效果很好，所以我怀疑三元条件。

标签： javascriptreactjs

解决方案

改变

   className={["navbar-collapse "  + this.state.navCollapsed ? 'collapse' : '' ]}

至

  className={this.state.navCollapsed ? "navbar-collapse collapse" : "navbar-collapse"}

推荐阅读