如何在ReactJS中获得视口高度?在正常的JavaScript中使用
window.innerHeight()
但是使用ReactJS,我不确定如何获得这些信息。我的理解是
ReactDOM.findDomNode()
仅适用于已创建的组件。然而,对于文档或body元素,情况并非如此,它们可以为我提供窗口的高度。
如何在ReactJS中获得视口高度?在正常的JavaScript中使用
window.innerHeight()
但是使用ReactJS,我不确定如何获得这些信息。我的理解是
ReactDOM.findDomNode()
仅适用于已创建的组件。然而,对于文档或body元素,情况并非如此,它们可以为我提供窗口的高度。
当前回答
添加这个是为了多样性和干净的方法。
此代码使用函数式方法。我已经使用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>
</>
);
}
其他回答
有一个包有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
我建议使用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
通过在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;
}
React原生web有一个useWindowDimensions钩子,可以使用:
import { useWindowDimensions } from "react-native";
const dimensions = useWindowDimensions()
@speckledcarp的回答很好,但是如果你需要在多个组件中使用这个逻辑,那么可能会很乏味。您可以将其重构为HOC(高阶组件),以使此逻辑更易于重用。
withWindowDimensions.jsx
import React, { Component } from "react";
export default function withWindowDimensions(WrappedComponent) {
return class extends Component {
state = { width: 0, height: 0 };
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener("resize", this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateWindowDimensions);
}
updateWindowDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
};
render() {
return (
<WrappedComponent
{...this.props}
windowWidth={this.state.width}
windowHeight={this.state.height}
isMobileSized={this.state.width < 700}
/>
);
}
};
}
然后在你的主组件中:
import withWindowDimensions from './withWindowDimensions.jsx';
class MyComponent extends Component {
render(){
if(this.props.isMobileSized) return <p>It's short</p>;
else return <p>It's not short</p>;
}
export default withWindowDimensions(MyComponent);
你也可以“堆叠”hoc,如果你有另一个你需要使用,例如withthrouter (withWindowDimensions(MyComponent))
编辑:我现在会用React钩子(上面的例子),因为它们解决了hoc和类的一些高级问题