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 setapp-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