反応を起こすには？ Reactの考え方に苦しんでいる

Question

私はまだReactJSの新機能ですから、Reactコンポーネントを実装するのに苦労しています。

私のアプリでreact-tabsを使用しています。これは幅が十分に広い場合は問題ありませんが、一度携帯電話のサイズに縮小したら、ハンバーガーパネルを作りたいと思います。

どうすればこの問題を解決できますか？ タブのコンポーネントまたはハンバーグのパネルコンポーネントをレンダリングする条件付きif-elseブロックを作成するコンポーネントの幅が常にチェックされていますか？

これについて簡単な方法があります。しかし、私はそれをやる方法が少し失われています。

ありがとうございました！

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