如何在ReactJS中获得视口高度?在正常的JavaScript中使用
window.innerHeight()
但是使用ReactJS，我不确定如何获得这些信息。我的理解是
ReactDOM.findDomNode()
仅适用于已创建的组件。然而，对于文档或body元素，情况并非如此，它们可以为我提供窗口的高度。
当前回答
通过在useCallback中包装getWindowDimensions函数，我对代码进行了轻微的更新
import { useCallback, useLayoutEffect, useState } from 'react';
export default function useWindowDimensions() {
const hasWindow = typeof window !== 'undefined';
const getWindowDimensions = useCallback(() => {
const windowWidth = hasWindow ? window.innerWidth : null;
const windowHeight = hasWindow ? window.innerHeight : null;
return {
windowWidth,
windowHeight,
};
}, [hasWindow]);
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useLayoutEffect(() => {
if (hasWindow) {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}
}, [getWindowDimensions, hasWindow]);
return windowDimensions;
}
其他回答
有一个包有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
我发现了一个简单的组合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事件是双引号，而不是单引号。这一点让我有点不安;)
你可以像这样创建自定义钩子:
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;
}
这是你如何实现它，并在React函数组件中实时获得窗口宽度和高度:
import React, {useState, useEffect} from 'react'
const Component = () => {
const [windowWidth, setWindowWidth] = useState(0)
const [windowHeight, setWindowHeight] = useState(0)
useEffect(() => {
window.addEventListener('resize', e => {
setWindowWidth(window.innerWidth);
});
}, [window.innerWidth]);
useEffect(() => {
window.addEventListener('resize', e => {
setWindowHeight(window.innerHeight);
});
}, [window.innerHeight]);
return(
<h3>Window width is: {windowWidth} and Height: {windowHeight}</h3>
)
}
用一点打字稿
import { useState, useEffect } from 'react'; interface WindowDimentions { width: number; height: number; } function getWindowDimensions(): WindowDimentions { const { innerWidth: width, innerHeight: height } = window; return { width, height }; } export default function useWindowDimensions(): WindowDimentions { const [windowDimensions, setWindowDimensions] = useState<WindowDimentions>( getWindowDimensions() ); useEffect(() => { function handleResize(): void { setWindowDimensions(getWindowDimensions()); } window.addEventListener('resize', handleResize); return (): void => window.removeEventListener('resize', handleResize); }, []); return windowDimensions; }
