Réagir “après un rendu” code?

J'ai une application dans laquelle j'ai besoin de régler la hauteur d'un élément (permet de dire "app-contenu") de manière dynamique. Il prend la hauteur de la "google chrome" de l'application et de la soustraction et puis définit la hauteur de la "app-contenu" pour s'adapter à 100% à l'intérieur de ces contraintes. C'est super simple à la vanille, JS, jQuery, ou épine Dorsale de vues, mais j'ai du mal à comprendre ce que le processus de droite serait pour le faire dans de Réagir?

Ci-dessous est un exemple de composant. Je veux être en mesure de définir app-contenthauteur de 100% de la fenêtre moins la taille de la ActionBar et BalanceBar, mais comment puis-je savoir quand tout est rendu et où aurais-je mis le calcul des trucs dans ce Réagir la Classe?

/** @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;
  • Dans les navigateurs modernes vous pouvez utiliser flexbox de faire mieux. Sinon Harborhoffer de réponse.
  • Au début, j'étais comme "comment flexbox résoudre ce problème?" puis je me suis souvenu de la colonne en fonction de Flexbox et cela a fonctionné comme un charme!
InformationsquelleAutor Oscar Godson | 2014-10-24