キーワード†
- 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 がもってしまっているので、通常のケースではない。