React - Material-UIレスポンシブルなAppBarとDrawer

Question

反応するアプリケーションバーとドロワーを作成する方法の例を知っているか、知っていますか？

それはブラウザが小さい場合、動的アンドック引き出しと非表示にできるようにする必要があり、好ましくは、動的材料-UIサイトのような、大きなはすでにないときの引き出しをドッキング：あなたが聞くことができhttp://www.material-ui.com/#/components/drawer

Answer 1

をこのような画面サイズの変更はcomponentWillMountの方が良い方法があると確信していますが、これはうまくいきます。

toggleOpenDrawer =() => { 
    if (!this.state.mobile) { 
     return; 
    } 
    this.setState({ 
     open: !this.state.open 
    }) 
} 

setSmall =() => { 
    this.setState({open: false, docked: false, mobile: true}) 
} 

setLarge =() => { 
    this.setState({open: true, docked: true, mobile: false}) 
} 

componentWillMount() { 
    const mediaQuery = window.matchMedia('(min-width: 768px)'); 
    if (mediaQuery.matches) { 
    this.setLarge() 
    } else { 
    this.setSmall() 
    } 
    mediaQuery.addListener((mq) => { 
    if (mq.matches) { 
     this.setLarge() 
    } else { 
     this.setSmall() 
    } 
    }); 
}