Bagaimana saya bisa mendapatkan React untuk merender ulang tampilan ketika jendela browser diubah ukurannya?
Latar Belakang
Saya memiliki beberapa blok yang ingin saya tata letak satu per satu di halaman, namun saya juga ingin mereka memperbarui ketika jendela browser berubah. Hasil akhirnya akan seperti tata letak Pinterest Ben Holland , tetapi ditulis menggunakan React bukan hanya jQuery. Aku masih jauh.
Kode
Inilah aplikasi saya:
var MyApp = React.createClass({
//does the http get from the server
loadBlocksFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) {
this.setState({data: data.events});
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
this.loadBlocksFromServer();
},
render: function() {
return (
<div>
<Blocks data={this.state.data}/>
</div>
);
}
});
React.renderComponent(
<MyApp url="url_here"/>,
document.getElementById('view')
)
Lalu saya memiliki Block
komponen (setara dengan Pin
dalam contoh Pinterest di atas):
var Block = React.createClass({
render: function() {
return (
<div class="dp-block" style={{left: this.props.top, top: this.props.left}}>
<h2>{this.props.title}</h2>
<p>{this.props.children}</p>
</div>
);
}
});
dan daftar / koleksi Blocks
:
var Blocks = React.createClass({
render: function() {
//I've temporarily got code that assigns a random position
//See inside the function below...
var blockNodes = this.props.data.map(function (block) {
//temporary random position
var topOffset = Math.random() * $(window).width() + 'px';
var leftOffset = Math.random() * $(window).height() + 'px';
return <Block order={block.id} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;
});
return (
<div>{blockNodes}</div>
);
}
});
Pertanyaan
Haruskah saya menambahkan ukuran jendela jQuery? Jika ya, dimana?
$( window ).resize(function() {
// re-render the component
});
Apakah ada cara lain "Bereaksi" untuk melakukan ini?
this.updateDimensions
diteruskan keaddEventListener
hanyalah referensi fungsi kosong yang tidak akan memiliki nilaithis
ketika dipanggil. Haruskah fungsi anonim, atau panggilan .bind () digunakan untuk menambahkanthis
, atau apakah saya salah paham?