web-dev-qa-db-ja.com

Reactで画面サイズがモバイルに変更されたかどうかを検出するにはどうすればよいですか？

Reactを使用してWebアプリを開発しています。状態を変更するには、画面サイズがモバイルブレークポイントに入ったことを検出する必要があります。具体的には、ユーザーがモバイルモードに入り、コンポーネント内の状態に格納されているブール値で制御されます。

reactjsresponsive
17
Embedded_Mugs

コンポーネントのマウント後にイベントリスナーを追加しました。

componentDidMount() {
    window.addEventListener("resize", this.resize.bind(this));
    this.resize();
}

resize() {
    this.setState({hideNav: window.innerWidth <= 760});
}

編集：状態の更新を保存するために、ウィンドウの幅が変更された場合にのみ更新されるように、「サイズ変更」を少し変更しました。

resize() {
    let currentHideNav = (window.innerWidth <= 760);
    if (currentHideNav !== this.state.hideNav) {
        this.setState({hideNav: currentHideNav});
    }
}
38
Ben Cohen

ちょっとこの問題のnpmパッケージを公開しました。それを確認してください https://www.npmjs.com/package/react-getscreen

import React, { Component } from 'react';
import {withGetScreen} from 'react-getscreen'

class Test extends Component {
  render() {
    if (this.props.isMobile()) return <div>Mobile</div>;
    if (this.props.isTablet()) return <div>Tablet</div>;
    return <div>Desktop</div>;
  }
}

export default withGetScreen(Test);

//or you may set your own breakpoints by providing an options object

const options = {mobileLimit: 500, tabletLimit: 800}
export default withGetScreen(Test, options);
3
Calin ortan

これは this answer と同じですが、イベントリスナーに関数をアタッチした後、componentWillUnmountで関数を削除します

constructor() {
  super();
  this.state = { screenWidth: null };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

componentDidMount() {
    window.addEventListener("resize", this.updateWindowDimensions());
}

componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowDimensions)
}

updateWindowDimensions() {
   this.setState({ screenWidth: window.innerWidth });
}
3
Muneeb JS