javascript - 反应“渲染后”代码？(React “after render” code?)

Question

I have an app where I need to set the height of an element (lets say "app-content") dynamically.

(我有一个应用程序，需要动态设置元素的高度（让我们说“ app-content”）。)

It takes the height of the "chrome" of the app and subtracts it and then sets the height of the "app-content" to fit 100% within those constraints.

(它获取应用程序“ chrome”的高度，然后减去它的高度，然后将“ app-content”的高度设置为在这些限制内适合100％。)

This is super simple with vanilla JS, jQuery, or Backbone views, but I'm struggling to figure out what the right process would be for doing this in React?

(这对于香草JS，jQuery或Backbone视图来说非常简单，但我正在努力弄清楚在React中执行此操作的正确过程是什么？)

Below is an example component.

(下面是一个示例组件。)

I want to be able to set app-content 's height to be 100% of the window minus the size of the ActionBar and BalanceBar , but how do I know when everything is rendered and where would I put the calculation stuff in this React Class?

(我希望能够将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;

  ask by Oscar Godson translate from so

Answer 1

componentDidMount()

(componentDidMount（）)

This method is called once after your component is rendered.

(渲染组件后，将调用此方法一次。)

So your code would look like so.

(因此您的代码看起来像这样。)

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