Как мне получить высоту области просмотра в ReactJS? В обычном JavaScript я использую

window.innerHeight()

но используя ReactJS, я не знаю, как получить эту информацию. Насколько я понимаю,

ReactDOM.findDomNode()

работает только для созданных компонентов. Однако это не относится к элементам document или body, которые могут дать мне высоту окна.

Ответы (17)

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} в шаблоне рендеринга

Вы также можете попробовать это:

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);
}

Этот ответ похож на ответ Джабрана Саида, за исключением того, что он также обрабатывает изменение размера окна. Получил от вот.

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 });
}

Просто получить с useEffect

useEffect(() => {
    window.addEventListener("resize", () => {
        updateDimention({ 
            ...dimension, 
            width: window.innerWidth, 
            height: window.innerHeight 
        });
        console.log(dimension);
    })
})

Простой способ сохранить текущие размеры в состоянии даже после изменения размера окна:

//set up defaults on page mount
componentDidMount() {
  this.state = { width: 0, height: 0 };
  this.getDimensions(); 

  //add dimensions listener for window resizing
  window.addEventListener('resize', this.getDimensions); 
}

//remove listener on page exit
componentWillUnmount() {
  window.removeEventListener('resize', this.getDimensions); 
}

//actually set the state to the window dimensions
getDimensions = () => {
  this.setState({ width: window.innerWidth, height: window.innerHeight });
  console.log(this.state);
}

Ответ @ 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 (
                
            );
        }
    };
}

Затем в вашем основном компоненте:

import withWindowDimensions from './withWindowDimensions.jsx';

class MyComponent extends Component {
  render(){
    if(this.props.isMobileSized) return 

It's short

; else return

It's not short

; } export default withWindowDimensions(MyComponent);

Вы также можете "складывать" HOC, если у вас есть другой, который вам нужно использовать, напримерwithRouter (withWindowDimensions (MyComponent))

Изменить: в настоящее время я бы использовал перехватчик React (пример выше здесь), поскольку они решают некоторые из сложных проблем с HOC и классами

Я просто серьезно потратил время на выяснение некоторых вещей с помощью 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
        });
      }
    }

(Моя панель навигации была 72 пикселя в фиксированном положении, поэтому -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);

Уф! Надеюсь, это кому-то поможет!

с небольшим машинописным текстом

import {useState, useEffect} из 'react';

interface WindowDimentions {
    ширина: число;
    высота: число;
}

function getWindowDimensions (): WindowDimentions {
    const {внутренняя ширина: ширина, внутренняя высота: высота} = окно;

    возвращение {
      ширина,
      высота
    };
  }
  
  функция экспорта по умолчанию useWindowDimensions (): WindowDimentions {
    const [windowDimensions, setWindowDimensions] = useState  (
      getWindowDimensions ()
    );
  
    useEffect (() => {
      function handleResize (): void {
        setWindowDimensions (getWindowDimensions ());
      }
  
      window.addEventListener ('изменить размер', handleResize);

      return (): void => window.removeEventListener ('изменить размер', handleResize);
    }, []);
  
    return windowDimensions;
  }

Ответы @speckledcarp и @Jamesl великолепны. В моем случае, однако, мне нужен был компонент, высота которого могла бы увеличивать высоту всего окна, условно во время рендеринга .... но вызов HOC внутри render () повторно визуализирует все поддерево. БАААД.

Кроме того, меня не интересовало получение значений в качестве свойств, мне просто нужен родительский 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.
      
Yay! render a page with some data.
) : ( // You're now in a full height div, so containers will vertically justify properly Page loading! )

Вот компонент:

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 (
      
{this.props.children}
) } } FullArea.defaultProps = { horizontal: false, vertical: false, } FullArea.propTypes = { horizontal: PropTypes.bool, vertical: PropTypes.bool, } export default FullArea

Я только что отредактировал QoPs текущий ответ для поддержки SSR и использовал его с Next.js (React 16.8.0 +):

/ хуки / useWindowDimensions.js:

import {useState, useEffect} из 'react';

функция экспорта по умолчанию useWindowDimensions () {

  const hasWindow = typeof window! == 'undefined';

  function getWindowDimensions () {
    const width = hasWindow? window.innerWidth: null;
    const height = hasWindow? window.innerHeight: null;
    возвращение {
      ширина,
      высота,
    };
  }

  const [windowDimensions, setWindowDimensions] = useState (getWindowDimensions ());

  useEffect (() => {
    if (hasWindow) {
      function handleResize () {
        setWindowDimensions (getWindowDimensions ());
      }

      window.addEventListener ('изменить размер', handleResize);
      return () => window.removeEventListener ('изменить размер', handleResize);
    }
  }, [hasWindow]);

  return windowDimensions;
}

/ yourComponent.js:

импортировать useWindowDimensions из './hooks/useWindowDimensions';

const Component = () => {
  const {высота, ширина} = useWindowDimensions ();
  / * вы также можете использовать значения по умолчанию или псевдоним, чтобы использовать только одну опору: * /
  // const {height: windowHeight = 480} useWindowDimensions ();

  возвращение (
    
ширина: {ширина} ~ высота: {высота}
); }

Как ответ от: 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);

React native web имеет хук useWindowDimensions, готовый к использованию:

    import { useWindowDimensions } from "react-native";
    const dimensions = useWindowDimensions()

Я нашел простую комбинацию 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 заключено в двойные кавычки, а не в одинарные. Этот меня ненадолго достал;)

Добавляем это для разнообразия и чистого подхода.

Этот код использует подход функционального стиля. Я использовал 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 (
    <>
      

width is : {size.x}

height is : {size.y}

); }

Добрый день,

Я знаю, что опаздываю на вечеринку, но позвольте мне показать вам свой ответ.

const [windowSize, setWindowSize] = useState(null)

useEffect(() => {
    const handleResize = () => {
        setWindowSize(window.innerWidth)
    }

    window.addEventListener('resize', handleResize)

    return () => window.removeEventListener('resize', handleResize)
}, [])

для дальнейших подробностей посетите https://usehooks.com/useWindowSize/

// 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
   
  )
}

Использование хуков (React 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;
}

And after that you'll be able to use it in your components like this

const Component = () => {
  const { height, width } = useWindowDimensions();

  return (
    
width: {width} ~ height: {height}
); }

Рабочий пример

Оригинальный ответ

То же самое и в React, вы можете использовать window.innerHeight, чтобы получить текущую высоту области просмотра.

Как видите здесь

2022 WebDevInsider