ReactJS에서 뷰포트 높이를 어떻게 얻습니까? 일반적인 JavaScript에서는
window.innerHeight()그러나 ReactJS를 사용하면이 정보를 얻는 방법을 모르겠습니다. 내 이해는
ReactDOM.findDomNode()생성 된 컴포넌트에만 작동합니다. 그러나 이것은 document또는 body요소 의 경우가 아니므로 창의 높이를 얻을 수 있습니다.
답변
이 답변은 창 크기 조정도 처리한다는 점을 제외하고 Jabran Saeed와 유사합니다. 나는 여기 에서 그것을 얻었다 .
constructor(props) {
super(props);
this.state = { width: 0, height: 0 };
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions() {
this.setState({ width: window.innerWidth, height: window.innerHeight });
}
답변
후크 사용 (반응 16.8.0+)
useWindowDimensions후크를 만듭니다 .
import { useState, useEffect } from 'react';
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowDimensions;
}
그 후에는 다음과 같이 구성 요소에서 사용할 수 있습니다
const Component = () => {
const { height, width } = useWindowDimensions();
return (
<div>
width: {width} ~ height: {height}
</div>
);
}
원래 답변
React에서도 동일 window.innerHeight하며 현재 뷰포트의 높이를 얻는 데 사용할 수 있습니다 .
여기서 볼 수 있듯이
답변
class AppComponent extends React.Component {
constructor(props) {
super(props);
this.state = {height: props.height};
}
componentWillMount(){
this.setState({height: window.innerHeight + 'px'});
}
render() {
// render your component...
}
}
소품 설정
AppComponent.propTypes = {
height:React.PropTypes.string
};
AppComponent.defaultProps = {
height:'500px'
};
렌더링 템플릿에서 뷰포트 높이를 {this.state.height}로 사용할 수 있습니다.
답변
방금 SSR 을 지원 하고 Next.js 와 함께 사용 하기 위해 QoP 의 현재 답변 을 편집 했습니다 (React 16.8.0+).
/hooks/useWindowDimensions.js :
import { useState, useEffect } from 'react';
export default function useWindowDimensions() {
const hasWindow = typeof window !== 'undefined';
function getWindowDimensions() {
const width = hasWindow ? window.innerWidth : null;
const height = hasWindow ? window.innerHeight : null;
return {
width,
height,
};
}
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useEffect(() => {
if (hasWindow) {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}
}, [hasWindow]);
return windowDimensions;
}
/yourComponent.js :
import useWindowDimensions from './hooks/useWindowDimensions';
const Component = () => {
const { height, width } = useWindowDimensions();
/* you can also use default values or alias to use only one prop: */
// const { height: windowHeight = 480 } useWindowDimensions();
return (
<div>
width: {width} ~ height: {height}
</div>
);
}
답변
@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를 “스택”할 수도 있습니다. withRouter(withWindowDimensions(MyComponent))
편집 : HOC 및 클래스와 관련된 고급 문제 중 일부를 해결하기 위해 요즘 React 후크 ( 위의 예 )를 사용합니다.
답변
나는 방금 React와 스크롤 이벤트 / 위치로 어떤 것을 알아내는 데 진지한 시간을 보냈습니다. 그래서 여전히 찾고있는 사람들을 위해, 내가 찾은 것이 있습니다 :
뷰포트 높이는 window.innerHeight 또는 document.documentElement.clientHeight를 사용하여 찾을 수 있습니다. (현재 뷰포트 높이)
전체 문서 (본문)의 높이는 window.document.body.offsetHeight를 사용하여 찾을 수 있습니다.
문서의 높이를 찾으려고 할 때 바닥에 닿은 시점을 알고 있다면 다음과 같습니다.
if (window.pageYOffset >= this.myRefII.current.clientHeight && Math.round((document.documentElement.scrollTop + window.innerHeight)) < document.documentElement.scrollHeight - 72) {
this.setState({
trueOrNot: true
});
} else {
this.setState({
trueOrNot: false
});
}
}
(내 탐색 표시 줄은 고정 위치에 72px이므로 더 나은 스크롤 이벤트 트리거를 얻으려면 -72)
마지막으로 console.log ()에 대한 여러 스크롤 명령이있어 수학을 적극적으로 파악할 수있었습니다.
console.log('window inner height: ', window.innerHeight);
console.log('document Element client hieght: ', document.documentElement.clientHeight);
console.log('document Element scroll hieght: ', document.documentElement.scrollHeight);
console.log('document Element offset height: ', document.documentElement.offsetHeight);
console.log('document element scrolltop: ', document.documentElement.scrollTop);
console.log('window page Y Offset: ', window.pageYOffset);
console.log('window document body offsetheight: ', window.document.body.offsetHeight);
아휴! 그것이 누군가를 돕기를 바랍니다!
답변
// 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
</>
)
}