1. ホーム
  2. reactjs

[解決済み】React - DOMのレンダリング中にローディング画面を表示する?

2022-04-07 18:11:57

質問

Google Adsenseの申し込みページでの例です。メインページが表示される前にローディング画面が表示され、その後にメインページが表示されます。

Reactコンポーネントでローディング画面をレンダリングさせると、ページのローディング中は先にレンダリングされたDOMを待つ必要があるため表示されないので、同じことをReactで行う方法が分からない。

更新情報 :

スクリーンローダーを index.html で削除し、Reactで componentDidMount() のライフサイクル・メソッドです。

リアクトローディングスクリーン .

解決するには?

htmlファイル(例:index.html)にローディングアイコンを配置し、htmlファイルが読み込まれた直後にアイコンが表示されるようにすることで、実現できます。

アプリの読み込みが終了したら、ライフサイクルフックでそのローディングアイコンを削除すればいい。 componentDidMount .