ReactJS: Comment déterminer si l'application est affichée sur un navigateur mobile ou de bureau

Question

Dans ReactJS, existe-t-il un moyen de déterminer si le site Web est affiché sur un mobile ou un ordinateur de bureau? Parce que, en fonction de quel appareil je voudrais rendre différentes choses.

Je vous remercie

Answer 1

Ce que vous recherchez s'appelle react-responsive. Vous pouvez le trouver ici

Voici le guide rapide how to use de leur dépôt:

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

Answer 2

React ne fait pas cela, React n'est que la vue dans MVC. La logique de détermination (contrôlant ce qui DEVRAIT être visualisé) est le rôle du contrôleur. React n'implémente pas de contrôleur mais pense que cela devrait être fait par le reste de l'application. Vous devez donc ajouter un autre code contrôlant le contexte du composant React ou même utiliser différents composants pour différents périphériques.