Saya memiliki aplikasi tempat saya perlu mengatur ketinggian elemen (katakanlah "konten-aplikasi") secara dinamis. Dibutuhkan ketinggian "chrome" dari aplikasi dan kurangi itu dan kemudian atur ketinggian "app-content" agar sesuai dengan 100% dalam batasan itu. Ini super sederhana dengan tampilan vanilla JS, jQuery, atau Backbone, tapi saya berjuang untuk mencari tahu proses apa yang tepat untuk melakukan ini di React?
Di bawah ini adalah contoh komponen. Saya ingin dapat mengatur app-content
tinggi menjadi 100% dari jendela dikurangi ukuran ActionBar
dan BalanceBar
, tetapi bagaimana saya tahu kapan semuanya dirender dan di mana saya akan meletakkan barang perhitungan di Kelas Bereaksi ini?
/** @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;