reactjs - 使用 React js 在 bootstrap 4 中获取导航栏的状态

Question

我正在尝试根据导航栏是打开还是关闭（在移动设备和平板电脑视图中）切换一些样式，我已经看到了 jQuery 的解决方案，但我想在 react js 中做到这一点。

我尝试在汉堡包按钮上设置一个状态并在用户交互时切换它，但这确实不是一个好的解决方案，而且它有缺陷，因为有时用户可以在不点击汉堡包按钮的情况下关闭导航栏，而不是我想获得实际状态导航栏

这在反应js中可能吗？如果是这样怎么办？

Answer 1

使用布尔状态变量并在单击汉堡包时切换它...

...
constructor(props) {
    super(props);
    this.state = { showNav: true };
    this.toggleNav = this.toggleNav.bind(this);
}

toggleNav() {
    this.setState({ 
        showNav: !this.state.showNav
    })
}

在导航栏标记中...

<nav>
   <button className="navbar-toggler" type="button" onClick={this.toggleNav}>
       <span className="navbar-toggler-icon"></span>
   </button>
   <div className={(showNav ? 'show' : '') + ' collapse navbar-collapse'}>
   </div>
</nav>

演示：https ://codeply.com/p/z0rSHluhPi