Question

我想在桌面视图中显示一个对话框，并在移动视图中显示具有相同内容的抽屉。

我将Material UI用作组件库，并使用其Drawer和Dialog组件。

如果您已完成类似操作或采用其他方法来处理此问题，请分享。

Answer 1

只需要像这样在您的组件上添加resize事件：

componentDidMount() {
  document.addEventListener('resize' , this.handleResize)
}

handleResize = (event) => {
   if(window.innerWidth < 400) {
     // handle your component changes
   }
}

// dont forget to remove your event listener on component unmount

componentWillUnMount() {
  document.removeEventListener('resize',this.handleResize)
}

，如果您使用钩子：

useEffect(() => {
   document.addEventListener('resize' , handleResize);

   return () => {
     document.removeEventListener('resize',handleResize);
  }
})

const handleResize = (event) => {
   if(window.innerWidth < 400) {
     // handle your component changes
   }
}

如何在材质UI中有条件地渲染对话框和抽屉以适应不同的屏幕分辨率？

1 个答案: