反应“渲染后”代码？

Question

我有一个应用程序，需要动态设置元素的高度（让我们说“ app-content”）。它获取应用程序“ chrome”的高度，然后减去它的高度，然后将“
app-
content”的高度设置为在这些限制内适合100％。这对于香草JS，jQuery或Backbone视图来说非常简单，但是我正在努力弄清楚在React中执行此操作的正确过程是什么？

以下是一个示例组件。我希望能够将app-content的高度设置为窗口的100％减去ActionBarand
的大小BalanceBar，但是如何知道何时呈现所有内容以及将计算内容放在此React类的什么位置？

/** @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;

Answer 1

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>
    );
  }
});