React 和 Matchmedia

Question

我在组件中使用反应上下文 API 确实安装了设置方法。我还想在那里使用媒体查询并设置一个方法来根据屏幕大小打开或关闭sidenav。

类似的东西

 componentDidMount() {
    let context = this.context;
    let path = this.props.pageContext && this.props.pageContext.path;
    context.setSidenavLeaf(newPath)

// Below this is where I'd like to use the media query to set the sidenavOPen to false. Just not sure how to achieve that
  const match = window.matchMedia(`(max-width: 768px)`) 
if(match {
context.setSidenavOpen(false)
  }
}

有点困惑如何实现这样的目标。我想调用该方法并将其设置在我的组件中的特定媒体断点处。哪个正在使用反应路由器路径道具。因此，如果我点击该组件呈现的特定 url 并且屏幕大小是这样的，请关闭 sidenav 否则将其保持打开状态。

Answer 1

你需要监听resize事件：

 componentDidMount() {
    let context = this.context;
    let path = this.props.pageContext && this.props.pageContext.path;
    context.setSidenavLeaf(newPath);

    // Below this is where I'd like to use the media query to set the sidenavOPen to false. Just not sure how to achieve that
    this.checkWidth = () => {
      const match = window.matchMedia(`(max-width: 768px)`);
      if (match) {
        context.setSidenavOpen(false);
      }
    };

    this.checkWidth();
    window.addEventListener("resize", this.checkWidth);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.checkWidth);
  }

或将侦听器添加到媒体查询本身：

componentDidMount() {
    let context = this.context;
    let path = this.props.pageContext && this.props.pageContext.path;
    context.setSidenavLeaf(newPath);

    // Below this is where I'd like to use the media query to set the sidenavOPen to false. Just not sure how to achieve that
    this.match = window.matchMedia(`(max-width: 768px)`);
    this.checkWidth = (e) => {      
      if (e.matches) {
        context.setSidenavOpen(false);
      }
    };

    this.checkWidth(this.match);
    this.match.addListener(this.checkWidth);
  }

  componentWillUnmount() {
    this.match.removeListener(this.checkWidth);
  }

Answer 2

对于功能组件，github上有一个钩子可以为你做这件事https://www.npmjs.com/package/react-simple-matchmedia