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

Question

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

所以我用三元表达式创建了一个处理程序来有条件地呈现该类。

 <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 数组中，效果很好，所以我怀疑是三元条件。

Answer 1

改变

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

至

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