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

私はReactでWebアプリケーションを開発しており、状態を変更するために画面サイズがモバイルブレークポイントに入ったときを検出する必要があります。具体的には、ユーザーがモバイルモードに入ったときにsidenavを折りたたむ必要があり、コンポーネント内の状態に格納されているブール値で制御されます。Reactで画面サイズがモバイルに変更されたかどうかを検出する方法は？

出典

2017-06-11 Embedded_Mugs

コンポーネントが実装した後、私は何をしてイベントリスナーを追加します

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

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

出典

2017-06-11 07:33:17

を、それをチェックアウトあなたはデバウンスまたはそのイベントリスナーを絞ることになるでしょう。 [here]（https://remysharp.com/2010/07/21/throttling-function-calls）の両方の例があります。 – ivarni

ちょっと私はちょうどこの問題の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);

出典

2017-07-23 19:58:48

私に尋ねると、ブラウザは解像度だけでなく物理的な画面サイズを取得するのが簡単になるはずです。 – Andy

画面サイズに基づいて自分自身をレイアウトする経験豊かなコンポーネントは、再利用できません。たとえば、それらを2 x 2グリッドに配置する場合は、四分の一ではなく画面全体のサイズのようにレンダリングします。 – Andy

これらのようなアドオンは、コンテナコンポーネントのようなものでのみ使用する必要があります。 –

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

答えて

関連する問題