Question

我想在此函数中包含一个if语句，说“如果屏幕尺寸为x，则执行此操作”。我不确定是否有简单的方法可以做到这一点，或者我是否必须使用CSS媒体查询来做一些时髦的事情并调用该样式

toggleSidebarMobile () {
    let state = this.state
    // if 
    state.sidebarOpened = !state.sidebarOpened
    this.setState(state);
    }

我希望该功能只能在移动设备上使用。

Answer 1

您可以将window.innerWidth设置为在componentDidMount()中声明，并将其作为道具传递给根组件。之后，创建一个事件侦听器以侦听“调整大小” 事件并在大小改变时更新状态。例如：

componentDidMount() {
  this.setState({
    windowWidth:window.innerWidth
  })

  window.addEventListener("resize", this.handleScreenResize, true);
}

handleScreenResize = () => {
 this.setState({
    windowWidth:window.innerWidth
 })
}

在函数内部的if语句上设置屏幕尺寸

1 个答案: