web-dev-qa-db-ja.com

ReactJS：アプリケーションがモバイルまたはデスクトップのブラウザーで表示されているかどうかを判別する方法

ReactJSでは、ウェブサイトがモバイルとデスクトップのどちらで表示されているかを判断する方法はありますか？なぜなら、どのデバイスを使用するかによって、異なるものをレンダリングしたいからです。

ありがとうございました

javascripthtmlreactjsreact-jsx
13
user3259472

あなたが探しているものはreact-responsive。あなたはそれを見つけることができます ここ

ここは how to use彼らのリポジトリからのクイックガイド：

var MediaQuery = require('react-responsive');

var A = React.createClass({
  render: function(){
    return (
      <div>
        <div>Device Test!</div>

        <MediaQuery minDeviceWidth={1224}>
          <div>You are a desktop or laptop</div>
        </MediaQuery>
        <MediaQuery maxDeviceWidth={1224}>
          <div>You are a tablet or mobile phone</div>
        </MediaQuery>

        <MediaQuery orientation='portrait'>
          <div>You are portrait</div>
        </MediaQuery>
        <MediaQuery orientation='landscape'>
          <div>You are landscape</div>
        </MediaQuery>

        <MediaQuery minResolution='2dppx'>
          <div>You are retina</div>
        </MediaQuery>
      </div>
    );
  }
});
12
Anubhav Gupta

Reactはこれを行いません、ReactはMVCのビューにすぎません。決定ロジック（何を表示する必要があるかを制御する）がコントローラーの役割です。Reactコントローラーは実装していませんが、アプリケーションの残りの部分で実行する必要があると考えているため、Reactコンポーネントのコンテキストを制御する他のコードを追加するか、デバイスごとに異なるコンポーネントを使用する必要があります。

0
Sven van de Scheur