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

javascript reactjs viewport window

2022-08-29 23:54:31

如何在 ReactJS 中获取视口高度？在普通的JavaScript中，我使用

window.innerHeight()

但是使用ReactJS，我不确定如何获取这些信息。我的理解是

ReactDOM.findDomNode()

仅适用于创建的组件。然而，对于or元素来说，情况并非如此，它可以给我窗户的高度。documentbody

答案 1

使用 Hooks （React 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

这个答案与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 });
}