有一个包有93.000+下载，名为useWindowSize()

NPM I @react-hook/window-size

import {
  useWindowSize,
  useWindowWidth,
  useWindowHeight,
} from '@react-hook/window-size'

const Component = (props) => {
  const [width, height] = useWindowSize()
  const onlyWidth = useWindowWidth()
  const onlyHeight = useWindowHeight()
...
}

docs

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}

添加这个是为了多样性和干净的方法。

此代码使用函数式方法。我已经使用onresize而不是addEventListener，如在其他答案中提到的。

import { useState, useEffect } from "react";

export default function App() {
  const [size, setSize] = useState({
    x: window.innerWidth,
    y: window.innerHeight
  });
  const updateSize = () =>
    setSize({
      x: window.innerWidth,
      y: window.innerHeight
    });
  useEffect(() => (window.onresize = updateSize), []);
  return (
    <>
      <p>width is : {size.x}</p>
      <p>height is : {size.y}</p>
    </>
  );
}

我建议使用useSyncExternalStore

import { useSyncExternalStore } from "react";

const store = {
  size: {
    height: undefined,
    width: undefined
  }
};

export default function ChatIndicator() {
  const { height, width } = useSyncExternalStore(subscribe, getSnapshot);
  return (
    <h1>
      {width} {height}
    </h1>
  );
}

function getSnapshot() {
  if (
    store.size.height !== window.innerHeight ||
    store.size.width !== window.innerWidth
  ) {
    store.size = { height: window.innerHeight, width: window.innerWidth };
  }
  return store.size;
}

function subscribe(callback) {
  window.addEventListener("resize", callback);
  return () => {
    window.removeEventListener("resize", callback);
  };
}

如果你想试试:https://codesandbox.io/s/vibrant-antonelli-5cecpm

React原生web有一个useWindowDimensions钩子，可以使用:

    import { useWindowDimensions } from "react-native";
    const dimensions = useWindowDimensions()

在这里，您可以将投票次数最多的答案包装在一个节点包中(已测试，typescript)，以便使用。

安装:

npm i @teambit/toolbox.react.hooks.get-window-dimensions

用法:

import React from 'react';
import { useWindowDimensions } from '@teambit/toolbox.react.hooks.get-window-dimensions';

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

  return (
    <>
      <h1>Window size</h1>
      <p>Height: {height}</p>
      <p>Width: {width}</p>
    </>
  );
};