[解決済み】ReactJSでviewport/windowの高さを取得する。

質問

ReactJSでビューポートの高さを取得するにはどうしたらいいですか？通常のJavaScriptでは

window.innerHeight()

が、ReactJSを使うと、この情報をどうやって取得したらいいのかわからなくなります。私の理解では

ReactDOM.findDomNode()

は作成されたコンポーネントに対してのみ機能します。しかし、これは document または body 要素で、ウィンドウの高さを取得することができます。

解決方法は？

class AppComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {height: props.height};
  }

  componentWillMount(){
    this.setState({height: window.innerHeight + 'px'});
  }

  render() {
    // render your component...
  }
}

小道具を設定する

AppComponent.propTypes = {
 height:React.PropTypes.string
};

AppComponent.defaultProps = {
 height:'500px'
};

レンダリングテンプレートのビューポートの高さが {this.state.height} として利用可能になりました。