Во время работы над Next.js веб-сайт У меня возникла необходимость переместить компонент React в совершенно другое место в моей разметке, в зависимости от размера экрана.
В частности, у меня был компонент боковой панели, который я хотел разместить в левой части экрана на большом дисплее, но перед содержимым на меньшем дисплее.
Из-за того, как я организовал разметку HTML и CSS, мне не сразу стало ясно, как выполнить этот переход, не переписывая значительную его часть.
Поэтому я посмотрел на Попутный ветер, чтобы найти хорошее решение.
И это было так: я дважды добавил компонент на экран, присвоив класс скрытый xl:блок части “большой экран” и xl:скрытый фрагменту для меньших экранов:
...
Недостатком, конечно, является то, что компонент отображается дважды, но, поскольку это простой презентационный компонент без логики, это был компромисс, с которым я мог смириться.
Оригинал: “https://flaviocopes.com/react-move-component-different-place/”