Реагируйте: несколько шаблонов JSX для одного компонента

Question

Я новичок в React и разрабатываю приложение React, изначально созданное с использованием модуля create-реагировать-приложение, и мне нужно, чтобы оно было адаптировано для мобильных устройств (браузер) ... Для этого я сталкиваюсь с проблемой наличияМобильная и веб-версия одного и того же компонента.Мне было интересно, если есть способ оптимизировать процесс двух отдельных компонентов, имея только 2 разных шаблона рендеринга JSX и сохраняя одну и ту же базу кода.Я имею в виду загрузку конкретного JSX в зависимости от устройства и размещение его в методе рендеринга.

Любая помощь будет оценена Спасибо заранее

Answer 1

попробуйте реагировать на реакцию библиотеки.

вы можете отобразить другой компонент на основе mediaQuery

lib lib

import MediaQuery from 'react-responsive';

const Example = () => (
  <div>
    <div>Device Test!</div>
    <MediaQuery query="(min-device-width: 1224px)">
      <div>You are a desktop or laptop</div>
      <MediaQuery query="(min-device-width: 1824px)">
        <div>You also have a huge screen</div>
      </MediaQuery>
      <MediaQuery query="(max-width: 1224px)">
        <div>You are sized like a tablet or mobile phone though</div>
      </MediaQuery>
    </MediaQuery>
    <MediaQuery query="(max-device-width: 1224px)">
      <div>You are a tablet or mobile phone</div>
    </MediaQuery>
    <MediaQuery query="(orientation: portrait)">
      <div>You are portrait</div>
    </MediaQuery>
    <MediaQuery query="(orientation: landscape)">
      <div>You are landscape</div>
    </MediaQuery>
    <MediaQuery query="(min-resolution: 2dppx)">
      <div>You are retina</div>
    </MediaQuery>
  </div>
);

Answer 2

Вы можете использовать что-то вроде Bootstrap. Если это не решит проблему. Тогда вы можете иметь некоторое состояние флага и две функции, возвращающие разную разметку JSX. Вам придется написать логику для обнаружения мобильных.

Answer 3

Мы можем использовать библиотеку Rebass , которая также используется для создания адаптивного компонента для мобильных устройств, планшетов и компьютеров.Наряду с этим мы можем использовать стилизованный компонент , чтобы мы могли легко стилизовать наш компонент на основе нашего собственного CSS.

https://rebassjs.org/

https://www.styled -components.com/

Answer 4

Я использую Semantic-ui React, и есть компонент Responsive, с помощью которого вы можете отобразить конкретный компонент объявления и указать разрешение: например,

<Responsive as={Grid} {...Responsive.onlyMobile} columns='equal' >
   //stuff for mobile
</Responsive>

<Responsive as={Grid} {...Responsive.onlyTablet} columns='equal' >
   //stuff for tablet
</Responsive>

Answer 5

Другие ответы основаны на размере экрана (что может привести к ложным срабатываниям), это решение основано на обнаружении мобильных устройств

Вы можете использовать реагировать-device-detect

<BrowserView>
    <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
    <h1> This is rendered only on mobile </h1>
</MobileView>

Это может обернуть один вид или весь набор маршрутов внутри <Switch />