ReactJを使用してコンポーネント(デスクトップタイプのレイアウトが異なる)に完全に異なる(モバイルタイプのレイアウト)を作成するにはどうすればいいですか? これは、コンポーネントのレイアウトが異なっているはずです。小さな画面にロゴが付いたナビゲーションサイドバーになるデスクトップ画面用のメニュー(ヘッダーメニュー)を持つページを作成する。ReactJsのコンポーネントの異なるモバイルレイアウトの作成
0
A
答えて
3
正直、簡単resposive CSSレイアウトは、最善の解決策であってもよいが、手順は
1にある)ユーザ場合、モバイルまたはデスクトップ上でJSに検出します。 Detecting a mobile browser
2)あなたのルートコンポーネントに決定するためにそれを使用し、使用するレイアウト:
5
チェックアウトreact-responsive、あなたがレンダリングするためにメディアクエリを使用することができますたとえば、この質問には答えとして良い提案を持っていますデバイスのサイズに応じて異なるコンポーネント
関連する問題
- 1. ReactJS 2つの異なるコンポーネント
- 2. CSSモジュールとReactJS:異なるコンポーネントの親と子のCSSクラス
- 3. Reactjsの異なるコンポーネントで同じレデューサーを使用
- 4. ReactJSポータルの作成
- 5. 複数のReactJSコンポーネントを同じバンドル内の異なるページに配置する
- 6. Reactjsは異なるHTMLページにコンポーネントをレンダリングします
- 7. ReactJSコンポーネント内のテストメソッド?
- 8. reactjsコンポーネントのthis.state null
- 9. reactjsの親コンポーネントの子コンポーネントへのアクセス
- 10. (reactjs)コンポーネント
- 11. 異なるコンポーネントの異なるスタイルファイル
- 12. 異なるコンポーネント内のコンポーネントへのアクセス
- 13. ReactJSのコンポーネントの状態
- 14. ReactJs:動的なコンポーネントのコレクションをレンダリング
- 15. ReactJSコンポーネントの高さ '100%'
- 16. コンポーネント内のReactJS表示API
- 17. ReactJSコンポーネント通信
- 18. ReactJSコンポーネントfrom ReactDOM.render
- 19. ReactJS ES2015子コンポーネント
- 20. 複数ReactJSコンポーネント
- 21. モバイルレイアウトで奇妙なボディパッディング
- 22. 異なるのDropDownListコンポーネント
- 23. reactjsコンポーネントの状態で動的にプロパティを生成する
- 24. 作るreactjsで再利用可能なコンポーネント
- 25. reactjs - 別々のモジュールを作成する
- 26. Reactjsは他のコンポーネントの前にコンポーネントをレンダリングする
- 27. ReactJS子コンポーネントのローダーを表示する
- 28. ReactJSでのドキュメントの作成方法
- 29. reactjs親トリガー子コンポーネント
- 30. ReactJsデータ/コンポーネント構造