Javascript 反应和匹配媒体

我正在组件中使用react上下文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，否则将其保持打开状态

您需要侦听调整大小事件：

componentDidMount（）{
让context=this.context；
让path=this.props.pageContext&&this.props.pageContext.path；
context.setSidenavLeaf（newPath）；
//下面是我想使用媒体查询将sidenavOPen设置为false的地方。只是不确定如何实现
this.checkWidth=（）=>{
const match=window.matchMedia（`（最大宽度：768px）`）；
如果（匹配）{
context.setSidenavOpen（false）；
}
};
这是checkWidth（）；
window.addEventListener（“resize”，this.checkWidth）；
}
组件将卸载（）{
removeEventListener（“resize”，this.checkWidth）；
}

对于功能组件，github上有一个钩子可以为您执行此操作

不确定API自第一次应答后是否发生了更改，但

matchMedia

返回一个MediaQueryList对象而不是布尔值，因此这将始终通过检查。您需要测试MediaQueryList.matches-