如何在ReactJS中获得视口高度?在正常的JavaScript中使用
window.innerHeight()
但是使用ReactJS，我不确定如何获得这些信息。我的理解是
ReactDOM.findDomNode()
仅适用于已创建的组件。然而，对于文档或body元素，情况并非如此，它们可以为我提供窗口的高度。
当前回答
作为回答从:bren，但挂钩useEffect到[window.innerWidth]
const [dimension, updateDimention] = useState();
useEffect(() => {
window.addEventListener("resize", () => {
updateDimention({
...dimension,
width: window.innerWidth,
height: window.innerHeight
});
})
},[window.innerWidth]);
console.log(dimension);
其他回答
你可以像这样创建自定义钩子:
import { useEffect, useState } from "react";
import { debounce } from "lodash";
const getWindowDimensions = () => {
const { innerWidth: width, innerHeight: height } = window;
return { width, height };
};
export function useWindowSize(delay = 0) {
const [windowDimensions, setWindowDimensions] = useState(
getWindowDimensions()
);
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
const debouncedHandleResize = debounce(handleResize, delay);
window.addEventListener("resize", debouncedHandleResize);
return () => window.removeEventListener("resize", debouncedHandleResize);
}, [delay]);
return windowDimensions;
}
我发现了一个简单的组合QoP和speckledcarp的答案，使用React Hooks和调整大小功能，代码行数略少:
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const updateDimensions = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}
useEffect(() => {
window.addEventListener("resize", updateDimensions);
return () => window.removeEventListener("resize", updateDimensions);
}, []);
哦，是的，确保resize事件是双引号，而不是单引号。这一点让我有点不安;)
美好的一天,
我知道我来晚了，但让我告诉你我的答案。
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>
</>
);
};
作为回答从:bren，但挂钩useEffect到[window.innerWidth]
const [dimension, updateDimention] = useState();
useEffect(() => {
window.addEventListener("resize", () => {
updateDimention({
...dimension,
width: window.innerWidth,
height: window.innerHeight
});
})
},[window.innerWidth]);
console.log(dimension);
