キーワード

• React
• コンポーネント
• react-new-window

したいこと

react-new-window で開いた別ウィンドウを印刷させたい、のがきっかけ。

window.print();

すると、親ウィンドウが印刷されてしまう。

ので、react-new-window がそのコンポーネントで保持する this.window の値を取得したい。react-new-window は window.open() したときの戻り値を this.window に保持している。

どうやって

ref を使う。

<NewWindow {...newWindowProps} ref={element => this.newWindow = element} />

目的の window オブジェクトでプリントするには、

this.newWindow.window.print();

なお書き

%%element がないよ、みたいなタイミングがあったので三項演算子した。%%

%%なお、%% this.newWindow とするには関数ではくて React.Component のサブクラスにする必要がある。

標準的なやり方ではフィールドを使わない

「Thinking in React - React」によると、

• 変更のある値はstateにする
• またがってstateを利用するコンポーネントのルートがstateをもつ
• 子コンポーネントからの伝達はハンドラにてする

ということのはずなので、通常はフィールドに変更のある値を持たない。従ってrefを使うこともない。

今回のは NewWindow がもってしまっているので、通常のケースではない。

参考

• Refs and the DOM - React
• rmariuzzo/react-new-window: 🔲 Pop new windows in React, using window.open.
• Reactのrefを理解する@Typescript - Qiita