浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】componentDidmountの中でgetElementsByIdを正しく実行する

componentDidmountの中ではgetElementsByIdやgetElementsByClassNameで指定した

cssのスタイルはそのままではいじれない。

ページの組み立て速度は、render > componentdidmountなのだがなぜかcomponentdidmountの

getElementsByIdを先に認識してしまう。当たり前だが無い物を読もうとしているのでこれではクラッシュする。

正しく読み込むには、setTimeOutを使ってgetElementsByIdやgetElementsByClassNameのスタイルを

読み込むタイミングを遅らせる必要がある。

componentDidmountの中で以下のような処理を追加して先読みを防止する。

componentDidMount() {
 let text-box = document.getElementsById("text-box");
  setTimeout(() => {
    text-box[0].style.color = "#fff";
  }, 200)
}

一般的にcomponentDidMountはコンストラクタ→renderの順に読み込んで一番最後に読まれるのだがこのタイミングでなぜ

getElementsByIdの干渉が割り込むかは分からず。

  • この記事いいね! (0)