[解決済み】React - DOMのレンダリング中にローディング画面を表示する?
2022-04-07 18:11:57
質問
Google Adsenseの申し込みページでの例です。メインページが表示される前にローディング画面が表示され、その後にメインページが表示されます。
Reactコンポーネントでローディング画面をレンダリングさせると、ページのローディング中は先にレンダリングされたDOMを待つ必要があるため表示されないので、同じことをReactで行う方法が分からない。
更新情報 :
スクリーンローダーを
index.html
で削除し、Reactで
componentDidMount()
のライフサイクル・メソッドです。
例 と リアクトローディングスクリーン .
解決するには?
htmlファイル(例:index.html)にローディングアイコンを配置し、htmlファイルが読み込まれた直後にアイコンが表示されるようにすることで、実現できます。
アプリの読み込みが終了したら、ライフサイクルフックでそのローディングアイコンを削除すればいい。
componentDidMount
.
関連
-
[解決済み】コンポーネントの定義に表示名がない react/display-name
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] Next.jsでWebSocketを利用する
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] validateDOMNesting警告React
-
[解決済み] nextjsで異なる.envファイルを使用するには?
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み】react router v4 / v5でネストされたルート
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Propsが定義されていません。
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] TypeError: reactjs の未定義のプロパティ 'status' を読み取ることができません。
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] eslint: no-case-declaration - case ブロックで予期しない字句の宣言があった。
-
[解決済み] validateDOMNesting警告React
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避する方法は?