Как менять меню в зависимости от ширины экрана?
Прошу прощения за мой английский с помощью переводчика. Я использую React.js. У меня есть компонент «заголовок», который принимает два других компонента — и .
import React, { Component } from 'react';
import styles from './Header.module.css';
import MainLogo from '../MainLogo/MainLogo';
import NavMenu from '../NavMenu/NavMenu';
import BurgerButton from '../BurgerMenu/BurgerButton';
import BurgerMenu from '../BurgerMenu/BurgerMenu';class Header extends Component {
render() {
return (
<header className = {styles.header}>
<nav className = {styles.navBar}>
<MainLogo />
<NavMenu />
</nav>
</header>
);
}
}
export default Header;
Я также создал отдельный компонент. Я хочу получить такой вариант разметки: если размер экрана <= 420px, компонент должен отображаться в шапке. При ширине экрана >420px компонент должен отображаться. Понимаю, что вопрос очень банальный, но элегантного решения пока не нашел.
Заранее спасибо!
P.S. использование внешней библиотеки не подходит.
Мне нужен такой результат - ширина экрана меньше 420px в шапке отрисовывается Component 1 (BurgerButton), когда ширина экрана больше 420px в шапке отрисовывается Component 2 (NavMenu).
Ответы 1
Вы можете использовать react-media для условной визуализации компонентов в зависимости от размера экрана.
В вашем случае это будет выглядеть примерно так (адаптируйте под свою разметку)
<header className = {styles.header}>
<nav className = {styles.navBar}>
<MainLogo />
<NavMenu />
<Media query = {{ maxWidth: 420 }}>
{matches => <MyComponent /> // Component is in the header}
</Media>
</nav>
</header>
<Media query = {{ minWidth: 421 }}>
{matches => <MyComponent /> // Component is outside of the header}
</Media>
Отлично! это то, что мне было нужно! Большое спасибо!
"при размере экрана <= 420px компонент должен отображаться в шапке. При ширине экрана >420px компонент должен отображаться" что это значит для вас?