it-swarm.com.de

Rufen Sie die Ansichtsfenster-/Fensterhöhe in ReactJS ab

Wie bekomme ich die Höhe des Viewports?

window.innerHeight()

Aber durch die Verwendung von Reactjs bin ich nicht sicher, wie ich diese Informationen erhalten kann. Mein Verständnis ist das

ReactDOM.findDomNode()

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

72
Jabran Saeed
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'
};

viewport height ist jetzt als {this.state.height} in der Rendering-Vorlage verfügbar

38
Jabran Saeed

Diese Antwort ist der von Jabran Saeed ähnlich, außer, dass sie auch die Fenstergröße ändert. 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 });
}
166
speckledcarp

Die Antwort von @speckledcarp ist großartig, kann aber langwierig sein, wenn Sie diese Logik in mehreren Komponenten benötigen. Sie können es als HOC (höherwertige Komponente) 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 auch HOCs "stapeln", wenn Sie andere benötigen, z. withRouter(withWindowDimensions(MyComponent))

8
James L.

In React ist es dasselbe, Sie können mit window.innerHeight die Höhe des aktuellen Ansichtsfensters ermitteln. 

Wie Sie sehen können, hier

7
QoP

Ich habe gerade einige Zeit damit verbracht, ein paar Dinge mit React und Scrolling-Events/Positionen herauszufinden.

Die Höhe des Darstellungsbereichs kann mit window.innerHeight oder mit document.documentElement.clientHeight ermittelt werden. (Aktuelle Ansichtsfensterhöhe)

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

Wenn Sie versuchen, die Höhe des Dokuments zu ermitteln, und wissen, wann Sie unten angekommen sind, haben Sie 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 Navbar war 72px in fester Position, daher die -72, um einen besseren Scroll-Event-Auslöser zu erhalten)

Zum Schluss noch ein paar Scroll-Befehle in console.log (), die mir geholfen haben, meine Berechnungen aktiv herauszufinden.

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!

4
thielr7

Die Antworten von @speckledcarp und @Jamesl sind beide brillant. In meinem Fall brauchte ich jedoch eine Komponente, deren Höhe die volle Fensterhöhe verlängern könnte (bedingt durch die Renderzeit). Beim Aufruf eines HOC innerhalb von render() wird jedoch der gesamte Teilbaum neu dargestellt. BAAAD.

Außerdem war ich nicht daran interessiert, die Werte als Requisiten zu erhalten, sondern wollte einfach ein übergeordnetes div, das die gesamte Bildschirmhöhe (oder Breite oder beides) einnimmt.

Also habe ich eine Parent-Komponente geschrieben, die eine volle Höhe (und/oder Breite) enthält. 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
1
thclark

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);
}
0
Shubham Verma