[解決済み] Reactの "after render "コード？

質問

あるアプリで、ある要素（例えば"app-content"）の高さを動的に設定する必要があります。アプリの"chrome"の高さを取り、それを引いて、その制約の中で100%フィットするように"app-content"の高さを設定するのです。これは、バニラJS、jQuery、またはBackboneビューで超簡単ですが、私はReactでこれを行うための正しいプロセスを理解するのに苦労しているのでしょうか？

以下はコンポーネントの例です。私は app-content の高さは、ウィンドウの100%から ActionBar と BalanceBar しかし、すべてがレンダリングされたときにどのように知ることができるのでしょうか、また、このReact Classのどこに計算のものを置くのでしょうか？

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

解決方法は？

componentDidMount()

このメソッドは、コンポーネントがレンダリングされた後に一度だけ呼び出されます。つまり、あなたのコードは次のようになります。

var AppBase = React.createClass({
  componentDidMount: function() {
    var $this = $(ReactDOM.findDOMNode(this));
    // set el height and width etc.
  },

  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
          <div className="inner-wrapper">
            <ActionBar title="Title Here" />
            <BalanceBar balance={balance} />
            <div className="app-content">
              <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});