在ReactJS中获取视口/窗口高度


159

如何在ReactJS中获得视口高度?在普通的JavaScript中,我使用

window.innerHeight()

但是使用ReactJS,我不确定如何获取此信息。我的理解是

ReactDOM.findDomNode()

仅适用于创建的组件。但是,documentor body元素不是这种情况,它可能会给我窗口的高度。

Answers:


244

这个答案类似于Jabran Saeed的答案,除了它还可以处理窗口大小调整。我从这里得到的。

constructor(props) {
  super(props);
  this.state = { width: 0, height: 0 };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

componentDidMount() {
  this.updateWindowDimensions();
  window.addEventListener('resize', this.updateWindowDimensions);
}

componentWillUnmount() {
  window.removeEventListener('resize', this.updateWindowDimensions);
}

updateWindowDimensions() {
  this.setState({ width: window.innerWidth, height: window.innerHeight });
}

3
您可以.bind(this)从回调参数中删除它,因为它已经被构造方法绑定了。
Scymex

1
Nitpick:构造函数中的代码应该是this.state = { width: 0, height: 0 };这样,以便状态var不会更改其类型(如果我正确理解window.innerWidth是integer)。除了使代码更易于理解恕我直言之外,不进行任何更改。感谢你的回答!
johndodo

1
@johndodo。哎呀 编辑。
speckledcarp

7
为什么不this.state = { width: window.innerWidth, height: window.innerHeight };开始?
Gerbus

1
也许最好不要使用回调来定位窗口的resize事件,然后在回调内重新定位全局窗口对象。为了性能,可读性和约定的缘故,我将对其进行更新以使用给定的事件值。
GoreDefex

175

使用挂钩(反应16.8.0+

创建一个useWindowDimensions钩子。

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

之后,您将可以像这样在组件中使用它

const Component = () => {
  const { height, width } = useWindowDimensions();

  return (
    <div>
      width: {width} ~ height: {height}
    </div>
  );
}

工作实例

原始答案

在React中是一样的,您可以window.innerHeight用来获取当前视口的高度。

正如你可以看到这里


2
window.innerHeight不是函数,而是属性
Jairo

2
好像Kevin Danikowski编辑了答案,并以某种方式批准了该更改。现在已修复。
QoP

3
@FeCH会在卸载组件时删除事件侦听器。它称为cleanup函数,您可以在此处
QoP

1
有什么想法可以使用SSR(NextJS)获得相同的方法吗?
roadev

1
@JS上的@roadev,您也可以检查req道具是否在上可用getInitialProps。如果是这样,它将在服务器上运行,那么您将没有窗口变量。
giovannipds

54
class AppComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {height: props.height};
  }

  componentWillMount(){
    this.setState({height: window.innerHeight + 'px'});
  }

  render() {
    // render your component...
  }
}

设置道具

AppComponent.propTypes = {
 height:React.PropTypes.string
};

AppComponent.defaultProps = {
 height:'500px'
};

视口高度现在可以在渲染模板中用作{this.state.height}


13
如果调整浏览器窗口的大小,此解决方案将不会更新
speckledcarp

1
仅供参考,在组件安装后更新状态将触发第二次render()调用,并可能导致属性/布局颠簸。github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/...
Haukur Kristinsson

1
@HaukurKristinsson如何克服这个问题?
理查德(Richard)

1
@JabranSaeed为什么不只是继续在构造函数上设置高度,而不是在安装时更新它?如果你需要的道具考虑您可以默认这样的价值给它:height: window.innerHeight || props.height。这不仅可以简化代码,而且可以消除不必要的状态更改。
JohnnyQ '17年

componentWillMount不再推荐使用,请参见reactjs.org/docs/react-component.html#unsafe_componentwillmount
holmberd

25

我刚刚编辑了QoP当前答案以支持SSR,并将其与Next.js结合使用(反应16.8.0+):

/hooks/useWindowDimensions.js

import { useState, useEffect } from 'react';

export default function useWindowDimensions() {

  const hasWindow = typeof window !== 'undefined';

  function getWindowDimensions() {
    const width = hasWindow ? window.innerWidth : null;
    const height = hasWindow ? window.innerHeight : null;
    return {
      width,
      height,
    };
  }

  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    if (hasWindow) {
      function handleResize() {
        setWindowDimensions(getWindowDimensions());
      }

      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }
  }, [hasWindow]);

  return windowDimensions;
}

/yourComponent.js

import useWindowDimensions from './hooks/useWindowDimensions';

const Component = () => {
  const { height, width } = useWindowDimensions();
  /* you can also use default values or alias to use only one prop: */
  // const { height: windowHeight = 480 } useWindowDimensions();

  return (
    <div>
      width: {width} ~ height: {height}
    </div>
  );
}

很好的解决方案。
杰里米E

15

@speckledcarp的答案很好,但是如果您需要在多个组件中使用此逻辑,可能会很乏味。您可以将其重构为HOC(高阶组件)以使此逻辑更易于重用。

withWindowDimensions.jsx

import React, { Component } from "react";

export default function withWindowDimensions(WrappedComponent) {
    return class extends Component {
        state = { width: 0, height: 0 };

        componentDidMount() {
            this.updateWindowDimensions();
            window.addEventListener("resize", this.updateWindowDimensions);
        }

        componentWillUnmount() {
            window.removeEventListener("resize", this.updateWindowDimensions);
        }

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

        render() {
            return (
                <WrappedComponent
                    {...this.props}
                    windowWidth={this.state.width}
                    windowHeight={this.state.height}
                    isMobileSized={this.state.width < 700}
                />
            );
        }
    };
}

然后在您的主要组件中:

import withWindowDimensions from './withWindowDimensions.jsx';

class MyComponent extends Component {
  render(){
    if(this.props.isMobileSized) return <p>It's short</p>;
    else return <p>It's not short</p>;
}

export default withWindowDimensions(MyComponent);

如果还需要使用其他HOC,也可以“堆叠” HOC,例如 withRouter(withWindowDimensions(MyComponent))

编辑:如今,我将使用React钩子(在上面的示例中),因为它们解决了HOC和类的一些高级问题


1
好工作@James
Manish sharma

8

我只是花了一些认真的时间来弄清React和滚动事件/位置的某些内容-因此对于那些仍在寻找的人,这是我发现的内容:

可以使用window.innerHeight或document.documentElement.clientHeight找到视口高度。(当前视口高度)

可以使用window.document.body.offsetHeight找到整个文档(正文)的高度。

如果您要查找文档的高度并知道何时到达最低点,这是我想出的:

if (window.pageYOffset >= this.myRefII.current.clientHeight && Math.round((document.documentElement.scrollTop + window.innerHeight)) < document.documentElement.scrollHeight - 72) {
        this.setState({
            trueOrNot: true
        });
      } else {
        this.setState({
            trueOrNot: false
        });
      }
    }

(我的导航栏在固定位置为72px,因此使用-72可获得更好的滚动事件触发器)

最后,这是console.log()的许多滚动命令,它们帮助我积极地计算数学。

console.log('window inner height: ', window.innerHeight);

console.log('document Element client hieght: ', document.documentElement.clientHeight);

console.log('document Element scroll hieght: ', document.documentElement.scrollHeight);

console.log('document Element offset height: ', document.documentElement.offsetHeight);

console.log('document element scrolltop: ', document.documentElement.scrollTop);

console.log('window page Y Offset: ', window.pageYOffset);

console.log('window document body offsetheight: ', window.document.body.offsetHeight);

ew!希望它能对某人有所帮助!


3
// just use (useEffect). every change will be logged with current value
import React, { useEffect } from "react";

export function () {
  useEffect(() => {
    window.addEventListener('resize', () => {
      const myWidth  = window.innerWidth;
      console.log('my width :::', myWidth)
   })
  },[window])

  return (
    <>
      enter code here
   </>
  )
}

1
欢迎使用堆栈溢出。没有任何解释的代码转储很少有帮助。堆栈溢出只是学习,而不是提供摘要来盲目复制和粘贴。请编辑您的问题,并说明它比OP提供的效果更好。
克里斯

2

@speckledcarp和@Jamesl的回答都很棒。但是,就我而言,我需要一个组件,该组件的高度可以扩展整个窗口的高度,在渲染时有条件....但是在内部调用HOC会render()重新渲染整个子树。BAAAD。

另外,我对获取价值作为道具不感兴趣,只是想要一个父母 div可以占据整个屏幕高度(或宽度,或两者兼而有之)。

所以我写了一个提供完整高度(和/或宽度)div的Parent组件。繁荣。

用例:

class MyPage extends React.Component {
  render() {
    const { data, ...rest } = this.props

    return data ? (
      // My app uses templates which misbehave badly if you manually mess around with the container height, so leave the height alone here.
      <div>Yay! render a page with some data. </div>
    ) : (
      <FullArea vertical>
        // You're now in a full height div, so containers will vertically justify properly
        <GridContainer justify="center" alignItems="center" style={{ height: "inherit" }}>
          <GridItem xs={12} sm={6}>
            Page loading!
          </GridItem>
        </GridContainer>
      </FullArea>
    )

这是组件:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class FullArea extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: 0,
      height: 0,
    }
    this.getStyles = this.getStyles.bind(this)
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this)
  }

  componentDidMount() {
    this.updateWindowDimensions()
    window.addEventListener('resize', this.updateWindowDimensions)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWindowDimensions)
  }

  getStyles(vertical, horizontal) {
    const styles = {}
    if (vertical) {
      styles.height = `${this.state.height}px`
    }
    if (horizontal) {
      styles.width = `${this.state.width}px`
    }
    return styles
  }

  updateWindowDimensions() {
    this.setState({ width: window.innerWidth, height: window.innerHeight })
  }

  render() {
    const { vertical, horizontal } = this.props
    return (
      <div style={this.getStyles(vertical, horizontal)} >
        {this.props.children}
      </div>
    )
  }
}

FullArea.defaultProps = {
  horizontal: false,
  vertical: false,
}

FullArea.propTypes = {
  horizontal: PropTypes.bool,
  vertical: PropTypes.bool,
}

export default FullArea

0

您也可以尝试以下操作:

constructor(props) {
        super(props);
        this.state = {height: props.height, width:props.width};
      }

componentWillMount(){
          console.log("WINDOW : ",window);
          this.setState({height: window.innerHeight + 'px',width:window.innerWidth+'px'});
      }

render() {
        console.log("VIEW : ",this.state);
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.