javascript - react "after render"代码？

Question

我有一个应用程序，我需要在其中动态设置元素的高度(比如说“应用程序内容”)。它取应用程序“chrome”的高度并将其减去，然后将“app-content”的高度设置为 100% 符合这些约束。这对于 vanilla JS、jQuery 或 Backbone View 来说非常简单，但我正在努力弄清楚在 React 中执行此操作的正确过程是什么？

下面是一个示例组件。我希望能够将 app-content 的高度设置为窗口的 100% 减去 ActionBar 和 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>
    );
  }
});