React - Material-UI Responsive AppBar và Drawer

Question

Có ai biết cách, hoặc biết bất kỳ ví dụ nào về cách tạo thanh ứng dụng và ngăn chứa phản ứng không?

Nó cần để có thể tự động bỏ bến ngăn kéo và ẩn khi trình duyệt nhỏ và dock ngăn kéo khi lớn hơn, tốt nhất là tự động như các trang web tài liệu-ui đã thực hiện: http://www.material-ui.com/#/components/drawer

Answer 1

Bạn có thể lắng nghe thay đổi kích thước màn hình trong componentWillMount như thế này, tôi chắc chắn có những phương pháp tốt hơn nhưng điều này hoạt động.

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() 
    } 
    }); 
}