浏览器上的Rerender视图使用React调整大小 [英] Rerender view on browser resize with React

问题描述

如何在调整浏览器窗口大小时让React重新渲染视图？

背景

<我有一些我想在页面上单独布局的块，但我也希望它们在浏览器窗口更改时更新。最终结果将是 Ben Holland's Pinterest布局，但使用React编写的不仅仅是jQuery。我还有一段距离。

代码

这是我的应用程序：

  var MyApp = React.createClass（{
 // http从服务器获取
 loadBlocksFromServer：function（）{
 $ .ajax（{
 url：this.props.url，
 dataType：'json'，
 mimeType：'textPlain'，
 success：function（data）{ 
 this.setState（{data：data.events}）; 
} .bind（this）
}）; 
}，
 getInitialState：function（）{ 
返回{data：[]}; 
}，
 componentWillMount：function（）{
 this.loadBlocksFromServer（）; 
 
}，
渲染：function（）{
 return（
< div> 
< Blocks data = {this.state.data} /> 
< / div> 
）; 
} 
}）; 
 
 React.renderComponent（
< MyApp url =url_here/> ;, 
 document.getElementById（'view'）
）
  

然后我有 Block 组件（相当于<$ c上面的Pinterest示例中的$ c> Pin ：

  var Block = React.createClass（{ 
渲染：function（）{
 return（
< div class =dp-blockstyle = {{left：this.props.top，top：this.props.left} }> 
< h2> {this.props.title}< / h2> 
< p> {this.props.children}< / p> 
< / div> 
）; 
} 
}）; 
  

以及块的列表/集合：

  var Blocks = React.createClass（{
 
 render：function（）{
 
 //我暂时得到了一个随机位置的代码
 //在下面的函数里面看到... 
 
 var blockNodes = this.props.data.map（ function（block）{
 //临时随机位置
 var topOffset = Math.random（）* $（窗口）.width（）+'px'; 
 var leftOffset = Math.random （）* $（窗口）.height（）+'px'; 
返回<阻止顺序= {block.id} title = {block.summary} left = {leftOffset} top = {topOffset}> {block.description}< / Block> ;; 
}）; 
 
 return（
< div> {blockNodes}< / div> 
）; 
} 
}）; 
  

问题

我应该添加jQuery的窗口吗调整？如果是这样，在哪里？

  $（窗口）.resize（function（）{
 //重新渲染组件
}）; 
  

还有更多的React方法吗？

解决方案

你可以在componentDidMount中听，就像这个只显示窗口尺寸的组件（比如< span> 1024 x 768< / span> ; ）：

  var WindowDimensions = React.createClass（{
 render：function（ ）{
 return< span> {this.state.width} x {this.state.height}< / span> ;; 
}，
 updateDimensions：function（）{
 this.setState（{width：$（window）.width（），height：$（window）.height（）}）; 
}，
 componentWillMount：function（）{
 this.updateDimensions（）; 
}，
 componentDidMount：function（）{
 window.addEventListener（resize，this.updateDimensions）; 
}，
 componentWillUnmount：function（）{
 window.removeEventListener（resize，this.updateDimensions）; 
} 
}）; 
  

How can I get React to re-render the view when the browser window is resized?

Background

I have some blocks that I want to layout individually on the page, however I also want them to update when the browser window changes. The very end result will be something like Ben Holland's Pinterest layout, but written using React not just jQuery. I’m still a way off.

Code

Here’s my 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')
)

Then I have the Block component (equivalent to a Pin in the above Pinterest example):

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

and the list/collection of 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

Should I add jQuery’s window resize? If so, where?

$( window ).resize(function() {
  // re-render the component
});

Is there a more "React" way of doing this?

解决方案

You can listen in componentDidMount, something like this component which just displays the window dimensions (like <span>1024 x 768</span>):

var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {
        this.setState({width: $(window).width(), height: $(window).height()});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});

这篇关于浏览器上的Rerender视图使用React调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！