react-responsive，在函数中使用而不是 jsx

Question

我喜欢 react-responsive 的 MediaQuery 组件，我可以这样使用它：

<MediaQuery maxDeviceWidth={480}>
  <button> Only show this on mobile </button>
</MediaQuery>

但是，如果我想根据我是否在移动设备上做某事，那么在一个函数（如事件处理程序）中呢？

例如，在我的移动版布局中，我希望在选择其中一个元素时发生滚动。此滚动在桌面布局中没有意义。所以我的点击处理程序之一应该是这样的：

onClick = () => {
  if (responsive.isMobile()) {
    window.scrollTo(0);
  }
}

我怎样才能做到这一点？

Answer 1

您可能不必依赖反应响应库来实现此功能。您可以使用 vanilla javascript 检测设备宽度，并自行确定它是否是您认为的“移动设备”。

现在有很多方法可以解决这个问题，老实说，我的建议只是一种解决方案。围绕这一点的讨论可以让您深入了解rabbit hole

为简单起见，这里有一个潜在的解决方案

onClick = () => {
  if (window.innerWidth <= 480) 
    window.scrollTo(0)
}