Question

我为我的英语翻译道歉。我使用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。使用外部库是不合适的。

Answer 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>

如何根据屏幕宽度更改菜单？

1 个答案: