反应敏感，在功能而不是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)
}