如何在ReactJS中获得视口高度?在正常的JavaScript中使用
window.innerHeight()
但是使用ReactJS,我不确定如何获得这些信息。我的理解是
ReactDOM.findDomNode()
仅适用于已创建的组件。然而,对于文档或body元素,情况并非如此,它们可以为我提供窗口的高度。
如何在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/
其他回答
@speckledcarp和@Jamesl的回答都很精彩。然而,在我的例子中,我需要一个组件,其高度可以扩展整个窗口高度,在呈现时有条件....但是在render()中调用HOC会重新渲染整个子树。很糟糕。
另外,我对获取作为道具的值不感兴趣,但只是想要一个父div,将占据整个屏幕的高度(或宽度,或两者)。
所以我写了一个父组件,提供了一个完整的高度(和/或宽度)div。
一个用例:
class MyPage extends React.Component {
render() {
const { data, ...rest } = this.props
return data ? (
// My app uses templates which misbehave badly if you manually mess around with the container height, so leave the height alone here.
<div>Yay! render a page with some data. </div>
) : (
<FullArea vertical>
// You're now in a full height div, so containers will vertically justify properly
<GridContainer justify="center" alignItems="center" style={{ height: "inherit" }}>
<GridItem xs={12} sm={6}>
Page loading!
</GridItem>
</GridContainer>
</FullArea>
)
下面是这个组件:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class FullArea extends Component {
constructor(props) {
super(props)
this.state = {
width: 0,
height: 0,
}
this.getStyles = this.getStyles.bind(this)
this.updateWindowDimensions = this.updateWindowDimensions.bind(this)
}
componentDidMount() {
this.updateWindowDimensions()
window.addEventListener('resize', this.updateWindowDimensions)
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions)
}
getStyles(vertical, horizontal) {
const styles = {}
if (vertical) {
styles.height = `${this.state.height}px`
}
if (horizontal) {
styles.width = `${this.state.width}px`
}
return styles
}
updateWindowDimensions() {
this.setState({ width: window.innerWidth, height: window.innerHeight })
}
render() {
const { vertical, horizontal } = this.props
return (
<div style={this.getStyles(vertical, horizontal)} >
{this.props.children}
</div>
)
}
}
FullArea.defaultProps = {
horizontal: false,
vertical: false,
}
FullArea.propTypes = {
horizontal: PropTypes.bool,
vertical: PropTypes.bool,
}
export default FullArea
用一点打字稿
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; }
你也可以试试这个:
constructor(props) {
super(props);
this.state = {height: props.height, width:props.width};
}
componentWillMount(){
console.log("WINDOW : ",window);
this.setState({height: window.innerHeight + 'px',width:window.innerWidth+'px'});
}
render() {
console.log("VIEW : ",this.state);
}
使用useEffect很简单
useEffect(() => {
window.addEventListener("resize", () => {
updateDimention({
...dimension,
width: window.innerWidth,
height: window.innerHeight
});
console.log(dimension);
})
})
这是你如何实现它,并在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>
)
}