Menu

キーワード

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

参考

スポンサーリンク