Блог

У меня есть компонент боковой панели, который имеет sidebarOpen поддержку, т.Е.: <SidebarWrapper sidebarOpen={this.props.sidebarOpen}>

У меня также есть кнопка, onClick переключающая sidebarOpen значения true и false.

У меня также есть прослушиватель событий, где, когда я на мобильном устройстве, установите sideBarOpen значение false. Это функция:

 setSidebar = () => {
 const isMobile = (typeof window !== 'undefined') amp;amp; (window.innerWidth < 500)

 if(isMobile) {
   this.props.openSidebar(false)
 } else {
   this.props.openSidebar(true)
 }
}
  

Чего я пытаюсь добиться, так это того, что если вы нажмете на кнопку, находясь на мобильном устройстве, и измените размер экрана, боковая панель должна оставаться открытой без мерцания.

Видео здесь

Вот полный компонент:

 import React from 'react'

import { bindActionCreators } from 'redux'
import { toggleDarkTheme, openSidebar } from '../../actions/layout'
import { connect } from 'react-redux'
import {SidebarWrapper} from './styles'


const mapDispatchToProps = dispatch => {
  return {
    toggleDarkTheme: bindActionCreators(toggleDarkTheme, dispatch),
    openSidebar: bindActionCreators(openSidebar, dispatch)
  }
}

const mapStateToProps = state => ({ sidebarOpen: state.layout.sidebarOpen });

export default connect(mapStateToProps, mapDispatchToProps)(class Sidebar extends React.Component {

  setSidebar = () => {
    const isMobile = (typeof window !== 'undefined') amp;amp; (window.innerWidth < 500)

    if(isMobile) {
      this.props.openSidebar(false)
    } else {
      this.props.openSidebar(true)
    }
  }

  componentDidMount() {
    window.addEventListener("resize", this.setSidebar);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.setSidebar);
  }

  render() {
    return (
      <SidebarWrapper sidebarOpen={this.props.sidebarOpen}>
          <button onClick={this.props.toggleDarkTheme}>Darkness</button>
      </SidebarWrapper>
    )
  }
})
  

и стили:

 import styled from 'styled-components'
import breakpoint from 'styled-components-breakpoint'

export const SidebarWrapper = styled.div`
  display: ${props => props.sidebarOpen ? 'flex' : 'none'};
  flex-direction: column;

`