私はこれまでnextJSとmaterial-uiを使用して大成功を収めてきました。
しかし、私は最近概念的な問題にぶつかっています:
アプリがサーバー上でレンダリングされるときはいつでも、クライアントに届くとリフローしないようにします。
デスクトップとモバイルデバイスでレイアウトを異なる方法でレンダリングしているため、
<Hidden implementation='css'/>
を使用してコンポーネントを分離しています成分。私は
implementation=css
を使用していますサーバーで使用できないため、ウィンドウの幅に依存できないためです。
今日の私の主な問題は、デスクトップとモバイルの両方のバージョンがレンダリングされることです。たとえ正しいバージョンが画面に表示されても、不必要なロジックの実行(特にAPI呼び出し)が発生します。
私は何か間違ったことをしたと思うが、それを修正する方法がわからない。
「理想的な」方法は
<Hidden/>
のようなコンポーネントになりますしかし、既にレンダリングされたコンポーネントを単に隠すのではなく、それはまったくレンダリングされません...そして、私は
window.innerWidth
を使用できませんもちろん、SSRが気になるので...
誰かがアイデアを持っているなら、私は感謝するでしょう。
回答 1 件
関連記事
- Reactコンポーネントは、オブジェクト内の1つのアイテムのみをレンダリングします
- 別のコンポーネントのレンダリング関数内で宣言されたコンポーネントのレンダリングには、REACT17のcomponentDidMountメソッドの変更は含まれません。
- チェックしたときにMaterial-UIスイッチコンポーネントのスタイルを上書きするにはどうすればよいですか?
- ReactNativeアプリがコンポーネントをレンダリングしていません
- 未処理の例外レンダリングコンポーネント:「ウィンドウ」に「AuthenticationService」が見つかりませんでした
- 子と兄弟コンポーネントのレンダリング
- コンポーネントのDOMがレンダリングを終了したときのAngular検出
- ReactMaterial-UIカード画像コンポーネント
- ReactJSのフィールドのフォーカスを失うことなく、Reactのtryブロックとcatchブロックの両方で同じコンポーネントをレンダリングする
関連した質問
- マテリアルUIで状態が変化したときに、スイッチラベルをどのように変更しますか?
- マテリアルUI:グローバルテーマの複数のCSSクラス
- 入力の量が不明な場合に、マテリアルUI入力から値を取得する方法
- 大画面でMaterialUI Mini Variant Drawerをデフォルトで開くにはどうすればよいですか?
- reactjs&mui:スタイルを適切に共有する方法は?
- Reactjs、マテリアルUiステッパーの方向
- 初期値の設定中にonChangeイベントを発生させます
- Material UIFabをOutlineに設定する方法
- テキストフィールドマテリアルUIの下向き矢印の色を変更する方法
- マテリアルUIとReactjsを使用して作成されたリスト内のアイテムを取り消します
だから、私は最終的に完璧ではなく、私の場合に最適なソリューションを見つけました:
レンダリングがサーバー側で行われると、material-ui
<Hidden implementation='css'/>
を使用しています (メディアクエリの反応コンポーネントでも同じことが実現できます)。そのため、コンポーネントはデスクトップバージョンとモバイルバージョンの両方をレンダリングし、すぐに正しいバージョンを非表示にします(画面にflickrはありません)。次に、レンダリングがクライアント側で行われると、
window.innerWidth
を計算しています コンポーネントが状態の変更ごとにモバイルバージョンとデスクトップバージョンを再計算しないようにします。ここに私のコードがあります: