Comment puis-je demander à React de restituer la vue lorsque la fenêtre du navigateur est redimensionnée?
Contexte
J'ai des blocs que je souhaite mettre en page individuellement sur la page, mais je veux également qu'ils soient mis à jour lorsque la fenêtre du navigateur change. Le résultat final sera quelque chose comme la mise en page Pinterest de Ben Holland , mais écrit en utilisant React et pas seulement jQuery. Je suis encore loin.
Code
Voici mon application:
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')
)
Ensuite, j'ai le Block
composant (équivalent à un Pin
dans l'exemple Pinterest ci-dessus):
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>
);
}
});
et la liste / collection de 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>
);
}
});
Question
Dois-je ajouter un redimensionnement de la fenêtre de jQuery? Si oui, où?
$( window ).resize(function() {
// re-render the component
});
Existe-t-il une façon plus «réactive» de procéder?
this.updateDimensions
passé àaddEventListener
est juste une référence de fonction nue qui n'aura aucune valeurthis
lors de son appel. Faut-il ajouter une fonction anonyme ou un appel .bind ()this
, ou ai-je mal compris?