javascript - 有条件地渲染导航栏，在 ReactJS 中转换为下拉列表

Question

我有一个导航栏，来自 bootstrap 主题，我在 react 中使用

它的工作原理是有一个内置的媒体查询，它终止了它是一个下拉列表还是没有一个切换器来处理下拉列表

 <button class="navbar-toggler collapsed" type="button" onClick={this.onToggleNav} data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

然后我有条件地渲染导航栏的内容

<div className={this.state.navClosed ? "navbar-collapse " : "navbar-collapse 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>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>
<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="text" placeholder="Search" />
  <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>

我的问题是，当屏幕全长时，仅显示元素是 navClosed 状态设置为 true，因此，如果设置为 false，则不会显示内容，除非屏幕设置为较低的宽度，并显示切换按钮。

我想知道你是否可以制作某种 lifeCycleHook 或条件处理程序，以检查屏幕的宽度，然后设置状态，如果宽度达到某个断点

  state = {
navClosed: false,

Answer 1

如果是supported by your browser一种解决方案是使用 Resize Observer API。

你可以在你的组件中添加这样的东西:

componentDidMount() {
    const navClosedWidth = 600;
    let {ResizeObserver} = window;
    let observer = new ResizeObserver(([{contentRect: rect}]) => {
        let navWidth = rect.width;
        if(this.state.navClosed && (navWidth > navClosedWidth)) {
            this.setState({navClosed: false});
        } else if(!this.state.navClosed && (navWidth <= navClosedWidth)) {
            this.setState({navClosed: true});
        }
    });
    observer.observe(document.querySelector("html"));
}

当宽度达到某个阈值时，它将更新状态。

Resize Observer documentation