モバイルデザインが非常に異なる場合（つまり、グリッドレイアウトを利用できない場合）、コンポーネントのデスクトップとモバイルのレイアウトを処理する方法は？

Question

私は反応アプリケーションを構築し、ブートストラップを使用しています。残念ながら、私のページの1つにデスクトップ上のGoogleマップ+リストがありますが、モバイルでは地図またはリスト（トグルを使用）を表示したいと思います。

デスクトップでは、マップはコンテナの幅の約75％を占め、リストは残りの25％を占めます。

私の解決策は、desktop,mobile-list（リストのみを表示）、mobile-map（マップのみを表示）という3つのクラスを使用することです。モバイルビューのときは、desktopクラスでdisplay: noneを使用します。

モバイルブレークポイントでは、ユーザーがリストを切り替えたかどうかに基づいて、レデューサーの現在の状態に基づいてビューが変更されます。

これを行うもっとエレガントな方法はありますか？私は、スタイルが何らかの理由で失敗した場合、それがひどく見えることに心配しています。

Answer 1

あなたが好きな幅に基づいて機能および変更されたレイアウトを作成することができます -

generateTemplate: function(){ 
     if(mobile) { 

      return (
       <div className="media"> 
        Hello Mobile 
       </div> 
      ); 
     } else { 

     return (
       <div className="media"> 
        Hello Desktop 
       </div> 
      ); 
     } 
    }, 

とレンダリングの使用でそれが好き -

render: function() { 

     let template = this.generateTemplate(); 

     return (
      <div> 
       {template} 
      </div> 
     ); 
    }