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>

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

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

这是我使用的主题的链接

我尝试过手动呈现条件，在javascript数组中使用两个姓氏，效果很好，所以我怀疑是三元条件

变化

   state = {
    navCollapsed: false
  }

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

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

到

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