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

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

提问于
用户回答回答于
var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {

    var w = window,
        d = document,
        documentElement = d.documentElement,
        body = d.getElementsByTagName('body')[0],
        width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
        height = w.innerHeight|| documentElement.clientHeight|| body.clientHeight;

        this.setState({width: width, height: height});
        // if you are using ES2015 I'm pretty sure you can do this: this.setState({width, height});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});

热门问答

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

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

获取不到群成员维度自定义字段CustomInfo是空的?

您好,群成员维度自定义字段值获取不到,可以从以下方面排查: 1、通过控制台查看自定义字段的配置是否正确。 2、确认查询请求中:请求用户是否有读取权限,群组类型是否支持该自定义字段。 3、确认该自定义字段的设置请求是否成功 4、对于群维度的自定义字段: iOS:需要在登录 IM S...... 展开详请

微信小程序什么情况下需要域名,什么情况下不需要?

最爱开车啦互联网的敏感者
推荐已采纳

1:不需要域名:使用微信门店小程序、微信小店小程序,以及静态的小程序(只有前端)

2:需要域名:小程序代码包限制在2M之内,好多东西都没法在代码包中加载,只能通过第三方web后台管理,后台是第三方的,假设是一个web网站,网站必须有服务器,就需要域名备案。

报考TCA可以同时在一天报考运维和架构的考试吗?

推荐

可以的,同一天最多支持报考两个科目,若您报考了两门科目考试,考试将以连考的形式在同一考场内进行。(例:14:00-15:30考云从业者,15:30-17:00考TCA运维)

腾讯云服务器上配置nginx访问对象存储,这样算内网还是外网访问呢?

Jinqn

腾讯 · 高级工程师 (已认证)

腾讯云COS前端开发
推荐

同园区会是内网,准确验证方法是,ping 对应存储桶域名,看看如果是 100. 10. 9. 172. 这样开头的内网 IP,就可以确定是内网访问,否则是外网访问。

关于云空间使用后是否需要再次交费的问题?

骑牛看晨曦love&peace~
推荐
如果是包年包月的服务器一次性付费后,访问服务器里搭建的网站,服务器不会有其他的流量费的,但是如果是后付费按量 按流量计费的服务器,会按每小时扣用户使用服务器资源的费用,产生流量也会按照官网价格计费的 。 请参考文档:https://cloud.tencent.com/produ...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券