越境ECセミナー
随時開催中!!

❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

Reactを部分導入する場合にReact root外の要素と連携する

テクニック

Reactを部分導入する場合にReact root外の要素と連携する

Reactを既存のプロジェクトに部分的に導入したい場合があると思いますが、
その場合にReactのrootの外側にある要素と連携したい場合にどのようにすればいいか、調べて試してみました。

今回はLaunchCartの案件で、絞り込み検索を詳細にカスタマイズするためにJavaScriptで補助する必要が出てきました。
これまででしたら、フレームワークなどを使わずにjQueryなどを使って組んでいたのですが、フレームワークを使わないとどうしても後で修正したい場合に構造が複雑になって面倒になりがちだったので、
この機会にReact + TypeScriptを部分導入という形で使ってみることにしました。

↓こちらが、テスト用に作ってみたもの
DEMO

方法

React rootの外部の要素と連携する場合、参照する外部の要素が外部側で変更される場合を想定して、グローバル領域(window オブジェクト)に予め要素を外部側で格納し、それをReact側で受け取って処理することにします。

外部のHTMLやJSファイルで

outside react root

TypeScriptの場合

TypeScript で window オブジェクトに任意のデータを格納したい場合、
declare を使ってTypeの拡張を行います。

window.d.ts

連携させたいReactのコンポーネントにuseEffect()でEventListenerを設定

続いてReact側のイベントリスナーの設定を行います。
まず外部要素と連携したいReactのコンポーネント内にイベントリスナーで呼び出すコールバック関数を設定し、
useEffect() を使ってイベントリスナーの設定を行います。

React component

ポイントは、イベントリスナで呼び出されるコールバック関数をuseEffect()の第2引数で渡すことです。
useEffect()は第2引数を渡さないとレンダリング毎に実行されてしまい、今回のようにイベントリスナーを設定する場合、不要な処理が繰り返し行われてしまうことになってしまいますが、
第2引数を設定することで、レンダリング毎に不要にイベントリスナが設定されることを防ぐことができます。

参考にさせていただいたサイト

ステートフックの利用法 – React

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。