¿Reaccionar el código "después de renderizar"?
Tengo una aplicación en la que necesito establecer la altura de un elemento (digamos "contenido de la aplicación") de forma dinámica. Toma la altura del "cromo" de la aplicación, la resta y luego establece la altura del "contenido de la aplicación" para que se ajuste al 100% dentro de esas restricciones. Esto es súper simple con las vistas Vanilla JS, jQuery o Backbone, pero me cuesta descubrir cuál sería el proceso correcto para hacer esto en React.
A continuación se muestra un componente de ejemplo. Quiero poder establecer app-contentque la altura sea el 100% de la ventana menos el tamaño de y ActionBar, BalanceBarpero ¿cómo sé cuándo se representa todo y dónde colocaría los elementos de cálculo en esta clase de 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;
componenteDidMount()
Este método se llama una vez después de renderizar su componente. Entonces tu código se vería así.
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>
);
}
});
Una desventaja de usar componentDidUpdate, or componentDidMountes que en realidad se ejecutan antes de que los elementos dom terminen de dibujarse, pero después de que hayan pasado de React al DOM del navegador.
Digamos, por ejemplo, que si necesita configurar node.scrollHeight en el node.scrollTop renderizado, entonces los elementos DOM de React pueden no ser suficientes. Debe esperar hasta que los elementos terminen de pintarse para obtener su altura.
Solución:
Úselo requestAnimationFramepara garantizar que su código se ejecute después de pintar su objeto recién renderizado.
scrollElement: function() {
// Store a 'this' ref, and
var _this = this;
// wait for a paint before running scrollHeight dependent code.
window.requestAnimationFrame(function() {
var node = _this.getDOMNode();
if (node !== undefined) {
node.scrollTop = node.scrollHeight;
}
});
},
componentDidMount: function() {
this.scrollElement();
},
// and or
componentDidUpdate: function() {
this.scrollElement();
},
// and or
render: function() {
this.scrollElement()
return [...]
