Come posso ottenere React per eseguire nuovamente il rendering della vista quando la finestra del browser viene ridimensionata?
sfondo
Ho alcuni blocchi che voglio layout individualmente sulla pagina, tuttavia voglio anche che vengano aggiornati quando cambia la finestra del browser. Il risultato finale sarà qualcosa di simile al layout Pinterest di Ben Holland , ma scritto usando React non solo jQuery. Sono ancora lontana.
Codice
Ecco la mia app:
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')
)
Quindi ho il Block
componente (equivalente a un Pin
nell'esempio Pinterest sopra):
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>
);
}
});
e l'elenco / raccolta di 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>
);
}
});
Domanda
Devo aggiungere il ridimensionamento della finestra di jQuery? Se sì, dove?
$( window ).resize(function() {
// re-render the component
});
Esiste un modo più "reattivo" per farlo?
this.updateDimensions
passato aaddEventListener
è solo un riferimento di funzione nuda che non avrà alcun valore perthis
quando viene chiamato. Per aggiungere una funzione anonima o una chiamata .bind ()this
o ho frainteso?