【React】constructor内でContext APIを使用する


Next.jsを使っていてgetInitialProps()内でContext APIを使いたかったけど、Reactライフサイクル内にないため使えなかった。

じゃあpropsを経由してconstructor()内でコンテクストに入れようとしたら中身にアクセスできなかった。

componentDidMount()でも悪くはないけどrender()前に処理したいので、ドキュメントにない方法で使ってみます。

 

まずはソースの要点を見てみます。

Reactライフサイクル内でもコンストラクタ内でthis.contextが使えないことに気づきました。

ドキュメントのconstructor()Class.contextTypeを見てもできそうにない。

ただソースコードを見るとできそうな感じがある。

 

第2引数にcontextを指定することでconstructor()内で参照できます。

一応thisで使えるようにsuperにも渡しておきます。

これでgetInitialProps()で処理した値を描画前にcontextに入れれました。

 

最初はなんでドキュメントにないんだと思いましたが、そもそもconstructor()contextにアクセスするケースがほとんどない気がする。通常のReactで考えると必要な状況が思いつかない。

まぁできるんなら使ってやろうって感じですがどっかで問題が出ないかだけは心配。


コメントを残す

メールアドレスが公開されることはありません。