[解決済み] ReactJS - 要素の高さを取得する

質問

Reactが要素をレンダリングした後に、その要素のHeightを取得するにはどうすればよいですか？

HTML

<div id="container">
<!-- This element's contents will be replaced with your component. -->
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
</div>

リアクトJS

var DivSize = React.createClass({

  render: function() {
    let elHeight = document.getElementById('container').clientHeight
    return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>;
  }
});

ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);

結果

Size: 36px but it should be 18px after the render

レンダリング前のコンテナの高さ(36px)を計算しています。レンダリング後の高さを取得したいのです。この場合、正しい結果は18pxになるはずです。 jsfiddle

解決方法は？

参照 これ フィドル (実際にはあなたのものを更新しました)

にフックする必要があります。 componentDidMount これは、render メソッドの後に実行されます。そこで、要素の実際の高さを得ることができます。

var DivSize = React.createClass({
    getInitialState() {
    return { state: 0 };
  },

  componentDidMount() {
    const height = document.getElementById('container').clientHeight;
    this.setState({ height });
  },

  render: function() {
    return (
        <div className="test">
        Size: <b>{this.state.height}px</b> but it should be 18px after the render
      </div>
    );
  }
});

ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
    <!-- This element's contents will be replaced with your component. -->
</div>