如何在材质 UI 中针对不同的屏幕分辨率有条件地呈现对话框和抽屉?

Question

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

我正在使用材料UI作为组件库，并且正在使用它的抽屉和对话框组件。

如果您做过这样的事情，或者如果您采取了不同的方法来处理此问题，请分享。

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
}
}