Render-Ansicht im Browser mit React ändern
Wie kann ich React dazu bringen, die Ansicht neu zu rendern, wenn die Größe des Browserfensters geändert wird?
HintergrundIch habe einige Blöcke, die ich individuell auf der Seite anordnen möchte. Ich möchte jedoch auch, dass sie aktualisiert werden, wenn sich das Browserfenster ändert. Das Endergebnis wird so etwas wie seinBen Holland's Pinterest-Layout, aber mit React nicht nur jQuery geschrieben. Ich bin noch weit weg.
CodeHier ist meine 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')
)
Dann habe ich dasBlock
Komponente (entspricht aPin
im obigen Pinterest-Beispiel):
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>
);
}
});
und die Liste / Sammlung vonBlocks
:
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>
);
}
});
FrageSollte ich die Fenstergröße von jQuery ändern? Wenn ja, wo?
$( window ).resize(function() {
// re-render the component
});
Gibt es eine reaktivere Möglichkeit, dies zu tun?