时间戳

首页 > 解决方案 > window.innerWidth 实时

javascript - window.innerWidth 实时

问题描述

当我实时调整浏览器大小时，我需要获取浏览器的宽度。到目前为止，我找到了一个给出宽度但不是实时的解决方案。只有在我刷新网页后才会更新该值。我如何在调整浏览器大小时获取值。

我的方法

render() {

var windowWidth = window.innerWidth;

return (

      <div className="body_clr">

        {windowWidth}

      </div>

)
}

如果我刷新页面，此解决方案有效。但是我想在调整大小时获得宽度，因为我必须以特定的屏幕大小执行函数。

标签： javascriptreactjswindow

解决方案

这是一种方法：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      height: 0,
      width: 0
    };

    window.addEventListener("resize", this.update);
  }

  componentDidMount() {
    this.update();
  }

  update = () => {
    this.setState({
      height: window.innerHeight,
      width: window.innerWidth
    });
  };

  render() {
    return (
      <React.Fragment>
        <p>height: {this.state.height}</p>
        <p>width: {this.state.width}</p>
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在这里工作 CodeSandbox 。

推荐阅读