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?

Hintergrund

Ich 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.

Code

Hier 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>
    );
  }
});
Frage

Sollte 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?

Antworten auf die Frage(16)

Ihre Antwort auf die Frage