Как перемещать блоки кода с помощью React и Tailwind

Во время работы над веб-сайтом Next.js мне пришлось переместить компонент React в совершенно другое место в моей разметке, в зависимости от размера экрана.

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

Из-за того, как я организовал разметку HTML и CSS, мне не сразу было понятно, как выполнить этот переход, не переписав его значительную часть.

Поэтому я посмотрел на Tailwind, чтобы найти хорошее решение.

Так и было: я дважды добавил компонент на экран, назначив классhidden xl:blockк части «большого экрана» иxl:hiddenк фрагменту для экранов меньшего размера:

<div className="hidden xl:block">
  <Sidebar />
</div>

…


<div className=“xl:hidden”>
<Sidebar />
</div>

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

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции:


Tech Wiki Online!