[解決済み] react.jsでDOMが読み込まれた時のコールバック
2023-03-16 05:15:11
質問
react.jsコンポーネントのDOM要素（すべての子ノードを含む）が実際にページに読み込まれ、準備ができたときにコールバックが呼び出されるようにしたいのです。具体的には、私は同じサイズをレンダリングしたい2つのコンポーネントを持っており、より大きな自然なサイズを持っている方のコンポーネントの最大値を選択します。
次のようになります。
componentDidMount
はコンポーネントごとに 1 回しか呼び出されないので、私が本当に欲しいものではありません。しかし、コンポーネントのレンダリングが終了するたびにコールバックが呼び出されるようにしたいのです。そこで
onLoad
イベントをトップレベルの DOM 要素に追加できると考えましたが、これは特定の要素にしか適用されないと思います。
<body>
と
<img>
.
どのように解決するのですか？
の組み合わせのようです。
componentDidMount
と
componentDidUpdate
が仕事をします。最初のものは最初のレンダリングの後、DOM が利用可能になったときに呼び出され、2 番目のものはそれ以降のレンダリングの後、更新された DOM が利用可能になったときに呼び出されます。私の場合、両方とも共通の関数に委譲して、同じことを行うようにしています。
関連
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み] テスト
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] MUI Boxは何のためのコンポーネントですか？
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには？
-
[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は？
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み】React.jsの状態配列の正しい修正について
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] react.jsでng-ifに相当するものは何ですか？
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか？
-
[解決済み] アクシオスは定義されていません
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する
-
[解決済み] Reactプロジェクトに.envファイルを追加する