it-swarm.com.ru

ReactJS: Как определить, просматривается ли приложение в мобильном или настольном браузере

В ReactJS есть ли способ определить, просматривается ли веб-сайт на мобильном или настольном компьютере? Потому что, в зависимости от того, на каком устройстве я бы хотел рендерить разные вещи.

Спасибо

8
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>
    );
  }
});
9
Anubhav Gupta

React этого не делает, React - это только представление в MVC. Логика определения (контроль того, что ДОЛЖНО быть просмотрено) является ролью Контроллера. React не реализует контроллер, но считает, что это должно быть сделано остальной частью приложения, поэтому вы должны добавить некоторый другой код, управляющий контекстом компонента React или даже используя разные компоненты для разных устройств.

0
Sven van de Scheur