Как реагировать реагировать? Стремление думать по пути Реагирования

Question

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

Я использую react-tabs в своем приложении. Это нормально, когда ширина достаточно широкая, но как только я сжимаю ее до размера телефона, я хотел бы сделать панель для гамбургеров.

Итак, как бы я это сделал? Я постоянно проверяю ширину в компоненте, где я делаю условный if-else блок рендеринга либо компонентом Tabs, либо компонентом панели Hamburger?

Должен быть простой способ сделать это. Но я немного потерял, как это сделать.

Благодарим за помощь!

Answer 1

Это пример того, как я имел дело с этой проблемой в прошлом.

class App extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      screenIsbig: true 
     }; 
    } 

    handleResize() { 
     if(window.innerWidth < 1200) { 
      this.setState({screenIsbig: false}) 
     } else { 
      this.setState({screenIsbig: true}); 
     } 
    } 

    componentDidMount() { 
     window.addEventListener('resize', this.handleResize.bind(this)); 
    } 

    componentWillUnmount() { 
     window.removeEventListener('resize', this.handleResize.bind(this)); 
    } 

    render() { 
     let renderThis; 
     if(this.state.screenIsbig) { 
      renderThis = <h1>This is for big screens</h1> 
     } else { 
      renderThis = <h3>This is for small screens</h3> 
     } 
     return (
      <div> 
       {renderThis} 
      </div> 
     ) 
    } 
}