Question

我已经为我的React应用程序导入了一个bootstrap主题，并且我在条件栏上有一个条件类，而不是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数组中使用两个姓氏，效果很好，所以我怀疑三元条件。

Answer 1

更改

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

收件人

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

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

1 个答案: