Reactjs - 如何在浏览器中调整大小重新呈现?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1121)

如何在调整浏览器窗口大小时让React重新呈现视图?

背景

我有一些要在页面上单独布局的块,但是我也希望它们在浏览器窗口更改时进行更新。

这是我的应用程序:

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')
)

然后我有Block组件(相当于上面Pinterest例子中的Pin):

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

和块的列表/集合:

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

我应该添加jQuery的窗口调整大小,如果是的话在哪里?

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

有没有更多的“反应”方式来做到这一点?

提问于
用户回答回答于

可以在组件中侦听,类似于此组件,它只显示窗口维度(如<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);
    }
});

热门问答

腾讯云短信SDK有没有支持NETFramework4.5.1的????

您好,可使用腾讯云短信C# SDK,github:https://github.com/qcloudsms/qcloudsms_csharp,感谢您对腾讯云短信的支持。

压力测试无法添加https域名?

论坛从其他服务器迁至腾讯云需要做些什么?

Hyman.W

腾讯云 · 高级产品经理 (已认证)

推荐
1,购买腾讯云服务器和带宽; 2,在所购买的云服务器上上部署论坛所需要的程序,包括论坛本身的代码,以及数据库等其他程序(这个需要软件公司来做); 3,把数据迁移到新的数据库(如果你刚开发完没有上线的话,应该不存在数据迁移,这个还是需要软件公司来判断) 4,如果你原来的论坛有域名,...... 展开详请

小程序,用腾讯云短信服务发送短信报错误?

嗨喽你好摩羯座
推荐
您好,请将第5步编写云函数处理逻辑中以下代码修改: "const qcloudsms = require("qcloudsms_js")" => "const QcloudSms = require("qcloudsms_js")" 并在注释/*单发短信示例为完整示例,更多功能...... 展开详请

私有群、公开群人数上限是多少?

推荐已采纳

您好,是不能突破的,而且还需要受到群组类型的限制。

单个账号导入接口 返回70402?

嗨喽你好摩羯座
推荐已采纳
您好,70402参数非法,请检查必填字段是否填充,或者字段的填充是否满足协议要求。从您提供的截图来看,是您的请求body没有填写完整,建议按照这个格式改下。 image.png 参考文档:https://cloud.tencent.com/document/product/...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券