Dapatkan viewport / tinggi jendela di ReactJS

Bagaimana cara mendapatkan ketinggian viewport di ReactJS? Dalam JavaScript normal saya gunakan

window.innerHeight()

tetapi menggunakan ReactJS, saya tidak yakin bagaimana mendapatkan informasi ini. Pemahaman saya adalah itu

ReactDOM.findDomNode()

hanya berfungsi untuk komponen yang dibuat. Namun ini bukan kasus untuk elemen documentatau body, yang bisa memberi saya ketinggian jendela.

Jawaban ini mirip dengan Jabran Saeed, kecuali itu juga menangani pengubahan ukuran jendela. Saya mendapatkannya dari sini .

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

Menggunakan Hooks (Bereaksi 16.8.0+)

Buat useWindowDimensionskail.

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

Dan setelah itu Anda akan dapat menggunakannya dalam komponen Anda seperti ini

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

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

Contoh kerja

Jawaban asli

Ini sama dalam Bereaksi, Anda dapat menggunakan window.innerHeightuntuk mendapatkan ketinggian viewport saat ini.

Seperti yang Anda lihat di sini

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

Atur alat peraga

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

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

tinggi viewport sekarang tersedia sebagai {this.state.height} di rendering template

Aku baru saja diedit QOP 's jawaban saat untuk mendukung RSK dan menggunakannya dengan Next.js (Bereaksi 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;
}

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

Jawaban @speckledcarp sangat bagus, tetapi bisa membosankan jika Anda membutuhkan logika ini di beberapa komponen. Anda bisa mengubahnya sebagai HOC (komponen urutan lebih tinggi) untuk membuat logika ini lebih mudah digunakan kembali.

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

Kemudian di komponen utama Anda:

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

Anda juga dapat "menumpuk" HOC jika Anda memiliki HOC lain yang perlu Anda gunakan, mis withRouter(withWindowDimensions(MyComponent))

Sunting: Saya akan menggunakan React hook saat ini ( contoh di atas sini ), karena mereka memecahkan beberapa masalah tingkat lanjut dengan HOC dan kelas

Saya hanya menghabiskan waktu yang serius untuk mencari tahu beberapa hal dengan Bereaksi dan menggulir acara / posisi - jadi bagi yang masih mencari, inilah yang saya temukan:

Ketinggian viewport dapat ditemukan dengan menggunakan window.innerHeight atau dengan menggunakan document.documentElement.clientHeight. (Tinggi viewport saat ini)

Ketinggian seluruh dokumen (tubuh) dapat ditemukan menggunakan window.document.body.offsetHeight.

Jika Anda berusaha menemukan ketinggian dokumen dan tahu kapan Anda telah mencapai dasarnya - inilah yang saya kemukakan:

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

(Navav saya adalah 72px dalam posisi tetap, sehingga -72 untuk mendapatkan pemicu scroll-event yang lebih baik)

Terakhir, berikut adalah sejumlah perintah gulir ke console.log (), yang membantu saya mengetahui matematika saya secara aktif.

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

Wah! Semoga ini bisa membantu seseorang!

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

Jawaban oleh @speckledcarp dan @Jamesl keduanya brilian. Namun, dalam kasus saya, saya membutuhkan komponen yang tingginya dapat memperpanjang ketinggian jendela penuh, bersyarat pada waktu render .... tetapi memanggil HOC dalam render()membuat ulang seluruh subtree. BAAAD.

Plus, saya tidak tertarik untuk mendapatkan nilai sebagai alat peraga tetapi hanya ingin orangtua divyang akan menempati seluruh ketinggian layar (atau lebar, atau keduanya).

Jadi saya menulis komponen Induk memberikan div tinggi penuh (dan / atau lebar). Ledakan.

Kasus penggunaan:

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

Inilah komponennya:

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

Anda juga dapat mencoba ini:

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