如何在ReactJS中获得视口高度?在正常的JavaScript中使用
window.innerHeight()
但是使用ReactJS，我不确定如何获得这些信息。我的理解是
ReactDOM.findDomNode()
仅适用于已创建的组件。然而，对于文档或body元素，情况并非如此，它们可以为我提供窗口的高度。
当前回答
美好的一天,
我知道我来晚了，但让我告诉你我的答案。
const [windowSize, setWindowSize] = useState(null)
useEffect(() => {
const handleResize = () => {
setWindowSize(window.innerWidth)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
欲了解更多详情，请访问https://usehooks.com/useWindowSize/
其他回答
在这里，您可以将投票次数最多的答案包装在一个节点包中(已测试，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>
</>
);
};
@foad abdollahi和@giovannipds答案的组合帮助我在Nextjs中使用useLayoutEffect自定义挂钩找到了一个解决方案。
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height,
};
}
function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(
getWindowDimensions()
);
useLayoutEffect(() => {
const isWindow = typeof window !== 'undefined';
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
isWindow && window.addEventListener('resize', handleResize);
console.log(windowDimensions);
return () =>
isWindow && window.removeEventListener('resize', handleResize);
}, [windowDimensions]);
return windowDimensions;
}
美好的一天,
我知道我来晚了，但让我告诉你我的答案。
const [windowSize, setWindowSize] = useState(null)
useEffect(() => {
const handleResize = () => {
setWindowSize(window.innerWidth)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
欲了解更多详情，请访问https://usehooks.com/useWindowSize/
保持当前尺寸状态的简单方法，即使在窗口调整大小后:
//set up defaults on page mount
componentDidMount() {
this.state = { width: 0, height: 0 };
this.getDimensions();
//add dimensions listener for window resizing
window.addEventListener('resize', this.getDimensions);
}
//remove listener on page exit
componentWillUnmount() {
window.removeEventListener('resize', this.getDimensions);
}
//actually set the state to the window dimensions
getDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
console.log(this.state);
}
// 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
</>
)
}
