Abrufen der Ansichtsfenster- / Fensterhöhe in ReactJS

Wie erhalte ich die Höhe des Ansichtsfensters in ReactJS? In normalem JavaScript verwende ich

window.innerHeight()

Bei Verwendung von ReactJS bin ich mir jedoch nicht sicher, wie ich diese Informationen erhalten soll. Mein Verständnis ist das

ReactDOM.findDomNode()

funktioniert nur für erstellte Komponenten. Dies ist jedoch nicht der Fall für das Element documentoder body, das mir die Höhe des Fensters geben könnte.

Diese Antwort ähnelt der von Jabran Saeed, behandelt jedoch auch die Größenänderung von Fenstern. Ich habe es von hier bekommen .

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

Haken verwenden (reagieren 16.8.0+)

Erstellen Sie einen useWindowDimensionsHaken.

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

Und danach können Sie es in Ihren Komponenten so verwenden

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

  return (
    <div>
      width: {width} ~ height: {height}
    </div>
  );
}

Arbeitsbeispiel

Ursprüngliche Antwort

In React ist es dasselbe, mit dem Sie window.innerHeightdie Höhe des aktuellen Ansichtsfensters abrufen können.

Wie Sie hier sehen können

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...
  }
}

Stellen Sie die Requisiten ein

AppComponent.propTypes = {
 height:React.PropTypes.string
};

AppComponent.defaultProps = {
 height:'500px'
};

Die Höhe des Ansichtsfensters ist jetzt in der Rendervorlage als {this.state.height} verfügbar

Ich habe gerade bearbeitet QoP ‚s aktuelle Antwort zu unterstützen SSR und verwenden Sie es mit Next.js (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>
  );
}

Die Antwort von @speckledcarp ist großartig, kann aber mühsam sein, wenn Sie diese Logik in mehreren Komponenten benötigen. Sie können es als HOC (Komponente höherer Ordnung) umgestalten. , um die Wiederverwendung dieser Logik zu vereinfachen.

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

Dann in Ihrer Hauptkomponente:

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

Sie können HOCs auch "stapeln", wenn Sie andere haben, die Sie verwenden müssen, z withRouter(withWindowDimensions(MyComponent))

Bearbeiten: Ich würde heutzutage mit einem React-Hook arbeiten ( Beispiel oben hier ), da sie einige der fortgeschrittenen Probleme mit HOCs und Klassen lösen

Ich habe gerade einige Zeit damit verbracht, einige Dinge mit React herauszufinden und Ereignisse / Positionen zu scrollen. Für diejenigen, die noch suchen, habe ich Folgendes gefunden:

Die Höhe des Ansichtsfensters kann mithilfe von window.innerHeight oder mithilfe von document.documentElement.clientHeight ermittelt werden. (Aktuelle Höhe des Ansichtsfensters)

Die Höhe des gesamten Dokuments (Körpers) kann mit window.document.body.offsetHeight ermittelt werden.

Wenn Sie versuchen, die Höhe des Dokuments zu ermitteln und wissen, wann Sie den unteren Rand erreicht haben, habe ich Folgendes gefunden:

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

(Meine Navigationsleiste war 72px in fester Position, daher die -72, um einen besseren Auslöser für Scroll-Ereignisse zu erhalten.)

Zuletzt finden Sie hier eine Reihe von Bildlaufbefehlen für console.log (), mit denen ich meine Mathematik aktiv herausfinden konnte.

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

Wütend! Hoffe es hilft jemandem!

Die Antworten von @speckledcarp und @Jamesl sind beide brillant. In meinem Fall benötigte ich jedoch eine Komponente, deren Höhe die gesamte Fensterhöhe erweitern konnte, abhängig von der Renderzeit. Durch Aufrufen eines HOC innerhalb wird render()der gesamte Teilbaum erneut gerendert. BAAAD.

Außerdem war ich nicht daran interessiert, die Werte als Requisiten zu erhalten, sondern wollte einfach einen Elternteil div, der die gesamte Bildschirmhöhe (oder -breite oder beides) einnimmt.

Also habe ich eine übergeordnete Komponente geschrieben, die ein Div mit voller Höhe (und / oder Breite) bereitstellt. Boom.

Ein Anwendungsfall:

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

Hier ist die Komponente:

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

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

Sie können dies auch versuchen:

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