“渲染后”反应码？ [英] React "after render" code?

问题描述

我有一个应用程序，我需要动态设置元素的高度（让我们说app-content）。它需要应用程序的chrome的高度并减去它，然后将app-content的高度设置为在这些约束内适合100％。这对于vanilla JS，jQuery或Backbone视图来说非常简单，但是我很难弄清楚在React中这样做的正确过程是什么？

I have an app where I need to set the height of an element (lets say "app-content") dynamically. 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. 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?

下面是一个示例组件。我希望能够将 app-content 的高度设置为窗口的100％减去 ActionBar 和 BalanceBar ，但我如何知道何时呈现所有内容以及将计算内容放在此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?

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

推荐答案

https://facebook.github.io/react/docs/react-component.html#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>
    );
  }
});

这篇关于“渲染后”反应码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！