Адаптивный макет в приложении React

задача — показать разные компоненты в зависимости от ширины устройства;

Я придумал два варианта:

напишите компонент React, который будет принимать несколько компонентов для каждой ширины (sm, md, xl). Он автоматически проверит ширину устройства и отобразит только один компонент в зависимости от ширины. (пример)

<DeviceChecker>
    <Desktop>
        <List/>
    </Desktop>
    <Mobile>
        <Carousel/>
    </Mobile>
</DeviceChecker>

Что мне не нравится в этом подходе, так это проверка ширины при изменении размера окна.

Напишите оба компонента в React, но с помощью медиа-запросов CSS покажите или скройте каждый из них, например:

<div>
    <Carousel className = "sm" />
    <List className = "md" />
</div>

что мне не нравится в этом случае, так это то, что React на самом деле будет отображать оба компонента, но один из них будет просто скрыт

Я знаю как реализовать оба варианта, но вопрос Какой из них является правильным способом написания адаптивных макетов для приложений React?

javascript html css reactjs bootstrap-4

04.03.2019 11:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

337

Ответы 1

 @media only screen and (min-width: 768px) {
  section.dashboard .slick-list .slick-track {
    display: flex;
  }
  section.dashboard .slick-list .slide {
    opacity: 1;
  }
  header .wrapper .article h1 span.arrow {
    display:none;
  }

  header .wrapper .article .description {
    max-height: 300px
  }
} 

@media only screen and (min-width: 1024px) {

  .container header .wrapper {
    text-align:left;
    margin-left:5%;
    width:480px;
  }

  .container header .header-nav-area #nav_container  {
    display:flex;
  }

  .container header form {
    display:block;
  }

  .container header .menu-icon {
    display:none;
  }

  header .wrapper .article footer {
    display: block;
  }

  section.dashboard .slick-list .slick-track {
    display: flex;
    min-width: 309px;
    padding: 20px;
  }
  
  section.dashboard .slick-list .slick-track[index = "2"] {
    display: flex;
  }

  section.dashboard .slick-list .slide {
    opacity: 1;
  }
}

Для получения более подробной информации посетите; https://itnext.io/3-ways-to-implement-responsive-design-in-your-react-app-bcb6ee7eb424

14.12.2021 18:03

Другие вопросы по теме

Как связать форму HTML и код nodejs

Index.php против index.html

Проверка размера изображения Javascript (байты)

Невозможно вывести значение ключа в методе GET HTTP через файл PHP

Сделать так, чтобы панель навигации превышала максимальную ширину [CSS]

Холст HTML5 | Прыгающие мячи | Перебор массива изображений и размещение разных фоновых изображений на каждом шаре по центру

Вместо document.write вывод в id/class div

Как я могу сделать так, чтобы div оставался рядом с определенным элементом на всех типах экранов с помощью HTML, CSS и Js?

В чем смысл тега body, если существуют div

Как получить данные из API отдыха на мой взгляд - Angular 6

Адаптивный макет в приложении React

Ответы 1

Другие вопросы по теме

Похожие вопросы